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

Question

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

我上网查了一下，没找到解决办法。

您可以将法线设置为：

text-align: center

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

最终结果的图片：

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

Answer 1

你可以使用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 2

不要这样做（或类似的事情）：

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

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

1。 text-align-last 属性：

直接从 W3Schools 引用：

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

请注意，text-align-last 属性设置所选元素中所有最后一行的对齐方式。因此，如果您有一个包含三个段落的文本，则 text-align-last 将应用于每个段落的最后一行。要仅在容器中的最后一段使用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找到。