文本对齐 html/css

Question

如您所见，文本未正确对齐。

我希望文本像这样显示，并且它也应该是合理的：

        Ethics/Moral:Respect for mankind,the environment and  fglll
                     nature without exceptionRespect for mankind,the   
                     environment and   nature without exception

下一行应与上一行从同一点开始。我怎样才能在 css

中做到这一点

Answer 1

我认为在这种情况下最好使用 ::first-line 伪元素。尝试：

::first-line {
    text-indent: -40px;
}

你必须自己调整文本缩进。

使用您的代码示例也会更容易一些。

Answer 2

通过使用 flex 你可以这样做

注意，我添加的 br 只是为了展示它在断行时的行为方式

.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>

如果您需要 2 个偶数列并具有动态内容，请使用 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>

旁注：

正如 Paulie D 很好地指出的那样，dl/dt/dd 可能是语义上最合适的标记，尽管我建议的样式可能会给您想要的结果。随意组合两者

Answer 3

@MuFFes 提到了 css 属性 text-indent，但我更喜欢使用 dl、dt 和 dd 元素。

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>

文本对齐 html/css

text align in html/css

css

text-align