Wie Sie sehen können, ist der Text nicht richtig ausgerichtet.text align in html/css
möchte ich den Text wie diese angezeigt werden, und es sollte auch gerechtfertigt sein:
Ethics/Moral:Respect for mankind,the environment and fglll
nature without exceptionRespect for mankind,the
environment and nature without exception
Die nächste Zeile sollte an der gleichen Stelle wie die vorhergehende Zeile beginnen. Wie kann ich es tun in CSS
von flex verwenden Sie
Hinweis diesem wie zu tun, die br Ich habe lediglich dort zu zeigen, wie es sich verhält, wenn die Leitung brechen
.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>und wenn Sie benötigen 2 gerade Spalten und dynamischen Inhalt, verwenden Sie 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>Randbemerkung:
Als Paulie D sehr gut darauf hingewiesen, dl/dt/dd ist wahrscheinlich die semantisch entsprechenden Markup, wenn meine vorgeschlagene Styling können Sie die geben gewünschtes Ergebnis. Fühlen Sie sich frei, die zwei
Ich denke, dass First-Line-Pseudoelement mit :: ist das Beste, was Sie in diesem Fall tun können. Versuchen Sie:
::first-line {
text-indent: -40px;
}
Sie müssen Text-Einzug selbst anpassen.
Es wäre auch ein wenig einfacher mit dem Beispiel Ihres Codes.
@MuFFes die css Eigenschaften text-indent erwähnt, aber ich bevorzuge, dl, dt und dd Elemente zu verwenden.
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>Noch wichtiger ist dies semantisch die beste Struktur. –
Willkommen bei Stackoverflow, wo wir Sie mit Ihrem Code helfen. Je weniger Code Sie teilen, desto weniger können wir Ihnen helfen. –
http://stackoverflow.com/questions/21316313/how-can-i-indent-all-text-in-a-paragraph-except-the-first-line – Vcasso
Möchten Sie, dass jeder Einzug derselbe ist, unabhängig davon Wie lange ist der fett gedruckte Text für jeden? Oder sollte die Einrückung von der Länge des fett gedruckten Textes abhängig sein? –