用CSS强制文本超过2行

Question

我想在第二行上有所有的姓氏并保持testdiv 的完全相同的宽度.使用CSS实现这一目标的最佳方法是什么？

HTML:

<div class="test">
    <h1>Mike S</h1>
</div>

<div class="test">
    <h1>Mike Smith</h1>
</div>

<div class="test">
    <h1>Mike Smiths</h1>
</div>

CSS:

.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}

http://jsfiddle.net/zcg9k5xh/

Answer 1

使用以下代码更新代码:

.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
h1 span{display: block;}

<div class="test">
    <h1>Mike <span>S</span></h1>
</div>

<div class="test">
    <h1>Mike <span>Smith</span></h1>
</div>

<div class="test">
    <h1>Mike <span>Smiths</span></h1>
</div>

您也可以使用css,更新上面的css来完成此操作

h1 span{display: list-item;list-style:none;}

jsfiddle与这个 http://jsfiddle.net/zcg9k5xh/2/

Answer 2

鉴于您似乎愿意更改 HTML，我建议您只需<br>在名字后面添加，而不是将姓氏包装在任何其他标签中。这将被视为最佳实践。

HTML<br>元素（或 HTML 换行元素）在文本中产生换行符

这将提供更多语义 HTML，无需调整原生元素样式，也无需用不必要的节点弄乱 DOM。

.test {
  width: 25%;
  float: left;
  background: red;
  margin-right: 20px
}
h1 {
  text-align: center
}

<div class="test">
  <h1>Mike<br>S</h1>
</div>

<div class="test">
  <h1>Mike<br>Smith</h1>
</div>

<div class="test">
  <h1>Mike<br>Smiths</h1>
</div>

Answer 3

使用子标签的 word-spacing 属性：

.test {
  width: 25%;
  float: left;
  background: red;
  margin-right: 20px
}
h1 {
  background-color: blue;
  word-spacing: 100px;
}

<div class="test">
  <h1>Mike S</h1>
</div>

<div class="test">
  <h1>Mike Smith</h1>
</div>

<div class="test">
  <h1>Mike Smiths</h1>
</div>