Question

我正在对段落进行样式设置，并且在一定数量的字符后有换行符。我希望能够使休息后的线左对齐而不是居中对齐。

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.paragraph {
  text-align: center;
  max-width: 220px;
  word-wrap: break-word;
  word-break: break-all;
}

<div class='justify'>
  <p class="paragraph">Hello, my name is Taylor and welcome to my personal website!</p>
</div>

Answer 1

您可以使用text-align-last

text-align-last CSS属性描述了如何在强制换行符之前对齐块或行的最后一行。

^MDN

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.paragraph {
  text-align: center;
  max-width: 220px;
  word-wrap: break-word;
  word-break: break-all;
  text-align-last: left;
  border: 1px solid red;
}

<div class='justify'>
  <p class="paragraph">Hello, my name is Taylor and welcome to my personal website!</p>
</div>

Answer 2

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.paragraph {
  text-align: left;
  max-width: 220px;
  word-wrap: break-word;
  word-break: break-all;
}

<div class='justify'>
  <p class="paragraph">Hello, my name is Taylor and welcome to my personal website!</p>
</div>

Answer 3

您可以使用以下解决方案在分词后将下一行左对齐而不是中心对齐：

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.paragraph {
  text-align: left; //changing text-align to left is an easy solution
  max-width: 220px;
  word-wrap: break-word;
  word-break: break-all;
}

断词后，将下一行左对齐而不是居中对齐

3 个答案: