text align in html/css [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
As you can see the text is not properly aligned.
I want the text to be displayed like these and it should be justified also:
Ethics/Moral:Respect for mankind,the environment and fglll
nature without exceptionRespect for mankind,the
environment and nature without exception
The next line should start at the same point as the previous line.
How can I do it in css

Answer 1

#MuFFes mentioned the css properties text-indent, but I prefer to use dl, dt, and dd elements.
dt {
float: left;
clear: left;
width: 100px;
text-align: right;
font-weight: bold;
}
dt:after {
content: ":";
}
dd {
margin: 0 0 0 110px;
padding: 0 0 0.5em 0;
}
<dl>
<dt>Ethics/Moral</dt>
<dd>Respect for mankind, the environment and nature without exception.</dd>
<dt>Honesty</dt>
<dd>Treating everyone with sincerity and integrity.</dd>
<dt>Quality/Safety</dt>
<dd>Mankind and the environment, the product and its utilization -achieving the optimum together.</dd>
</dl>

Answer 2

By using flex you can do like this
Note, the br I added is merely there to show how it behaves when breaking line
.row {
display: flex;
}
.row ~ .row {
margin-top: 5px;
}
.row div:first-child {
color: steelblue
}
<div class="row">
<div>
Ethics/Moral:
</div>
<div>
Respect for mankind, the environment and<br>nature - without exception
</div>
</div>
<div class="row">
<div>
Honesty:
</div>
<div>
Treating everyone with sincerity and<br>integrity
</div>
</div>
and if you need 2 even columns and have dynamic content, use display: table-row/table-cell
.row {
display: table-row;
}
.row div {
display: table-cell;
}
.row ~ .row div {
border-top: 10px solid transparent;
}
.row div:first-child {
color: steelblue
}
<div class="row">
<div>
Ethics/Moral:
</div>
<div>
Respect for mankind, the environment and<br>nature - without exception
</div>
</div>
<div class="row">
<div>
Honesty:
</div>
<div>
Treating everyone with sincerity and<br>integrity
</div>
</div>
Side note:
As Paulie D very well pointed out, dl/dt/dd is likely the most semantically appropriate markup, though my suggested styling might give you the wanted result. Feel free to combine the two

Answer 3

I think that using ::first-line pseudoelement is the best you can do in that case. Try:
::first-line {
text-indent: -40px;
}
You have to adjust text-indent by yourself.
It would be also a little bit easier with the sample of your code.