Question

我希望在第二行包含所有姓氏，并为test div保持完全相同的宽度。使用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混乱。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 4

我看不出你在问什么，看起来jsfiddle就是你在这里问的问题。但是你总是可以将宽度设置为100％，因此它覆盖了文本，如果你想在同一个div中将所有文本放在一个Div标签下面。

Answer 5

这是你想要的吗？

＆＃13;

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

＆＃13;

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

＆＃13;

用CSS强制文本超过2行

5 个答案: