使用CSS将文本强制超过2行
使用CSS将文本强制超过2行
提问于 2015-02-02 07:45:43
我希望第二行有所有的姓氏，并保持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/
回答 5
Stack Overflow用户
回答已采纳
发布于 2015-02-02 07:52:54
使用以下内容更新代码：
.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;}摆弄这个http://jsfiddle.net/zcg9k5xh/2/
Stack Overflow用户
发布于 2015-02-02 08:35:56
考虑到您似乎愿意更改HTML，我建议您只需在名称后面添加 ，而不是将姓氏包装在任何其他标记中。这将被视为最佳做法。
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>
Stack Overflow用户
发布于 2018-06-22 14:33:37
对子标记使用字间距属性：
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28273116
复制相关文章
相似问题
腾讯云开发者
