如果初始文本对齐为居中，如何左对齐文本的第二行

Question

如果文本中只有一行，我需要居中对齐文本，但如果有第二行，则需要使第二行左对齐

我已经上网了，找不到解决方案。

您将法线设置为：

text-align: center

我希望初始文本居中，但是如果它绕到第二行，我希望文本从左边开始而不是中心。

最终结果的图片：

但是如果只是一行，我希望它像下面一样居中

Answer 1

代替执行此操作（或类似操作）：

.wrapper {
  text-align: center; 
  width: 100%
}

<div class="wrapper">
  <p>Title</p>
  <div class="text">
    Example-TextExample-TextExample-TextExample-Text<br> Example-Text
  </div>
</div>

只需在其周围包裹一个容器并将其居中：

.wrapper {
  width: 100%; 
  text-align: center;
}

.text {
  display: flex; 
  justify-content: center; 
  text-align: left;
}

<div class="wrapper">
  <p>Title</p>
  <div class="text">
    <p>Example-TextExample-TextExample-TextExample-Text<br>Example-Text</p>
  </div>
</div>

Answer 2

您可以使用display:table

.wrapper {
  max-width: 400px;
  margin: auto;
  border: 2px solid;
}

.wrapper h1 {
  text-align: center;
  margin:5px;
}

.wrapper>div {
  display: table;
  margin: auto; /* center the block of text keep the default text-align:left inside*/
}

<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet</div>
</div>

<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing</div>
</div>
<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet, consectetur<br> adipiscing</div>
</div>
<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing. Mauris luctus laoreet nibh,</div>
</div>

或inline-block

.wrapper {
  max-width: 400px;
  margin: auto;
  border: 2px solid;
  text-align: center; /*center the text container*/
}

.wrapper h1 {
  margin:5px;
}

.wrapper>div {
  display: inline-block;
  text-align:left; /*keep the text left aligned inside*/
}

<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet</div>
</div>

<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing</div>
</div>
<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet, consectetur<br> adipiscing</div>
</div>
<div class="wrapper">
  <h1>Title</h1>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing. Mauris luctus laoreet nibh,</div>
</div>

Answer 3

首先，我想说的是，没有CSS就无法实现，因此您需要对代码使用样式。接下来，有多种方法可以达到预期的效果。我将继续解释其中的每一个。

1。 text-align-last属性：

直接从W3Schools报价：

text-align-last属性指定如何对齐文本的最后一行。

请注意，text-align-last属性设置了所选元素内所有最后一行的对齐方式。因此，如果其中包含三个段落，则text-align-last将应用于段落EACH的最后一行。要仅在容器的最后一段使用text-align-last，可以使用：last child。

注意：在Edge / Internet Explorer中，text-align-last属性仅适用于具有"text-align: justify"的文本。

浏览器支持：

代码段：

div.a {
  text-align: center;
  -moz-text-align-last: right; /* For Firefox prior 58.0 */
  text-align-last: left;
}

<div class="a">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

2。使用span：

默认情况下，span是一个内联元素，但是您可以为其设置display: block，然后可以用不同的文本对齐方式。注意此处使用!important。

代码段：

p {
  text-align: center;
}
span {
  text-align: left !important;
  display: block;
}

<p>
  This is the first line
  <span>Second Line</span>
</p>

3。使用包装器：

我不想重复已经提供的答案。 Aaron3219已经使用包装器回答了这个问题。可以找到here的答案。