Html 使用 CSS 强制文本超过 2 行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28273116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Force text over 2 lines with CSS
提问by michaelmcgurk
I'd like to have all surnames on the second line AND maintain the exact same width for testdiv. What is the best way of achieving this with CSS?
我希望所有姓氏都在第二行，并为testdiv保持完全相同的宽度。使用 CSS 实现这一目标的最佳方法是什么？
HTML:
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:
CSS：
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
回答by Swapnil Motewar
Update your code with this:
用这个更新你的代码：
.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>You can also do this by using css, update above css
你也可以通过使用 css 来做到这一点，更新上面的 css
h1 span{display: list-item;list-style:none;}
jsfiddle with this http://jsfiddle.net/zcg9k5xh/2/
jsfiddle 使用这个 http://jsfiddle.net/zcg9k5xh/2/
回答by SW4
Given that it seems you are willing to change your HTML, I would recommend you simply add <br>after the first name, instead of wrapping the last name in any other tags. This would be deemed best practice.
鉴于您似乎愿意更改您的 HTML，我建议您只需<br>在名字后面添加，而不是将姓氏包裹在任何其他标签中。这将被视为最佳实践。
The HTML
<br>Element (or HTML Line Break Element) produces a line break in text
HTML
<br>元素（或 HTML 换行元素）在文本中产生换行符
This will give more semantic HTML- without the need to adjust native element styling, or clutter your DOM with uneccessary nodes.
这将提供更多语义 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>回答by Derzu
Use the word-spacing attribute to the child tag:
对子标签使用 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>回答by Sean Downey
I don't see what you are asking, it seems like the jsfiddle is what you are asking here. But you can always set width to 100% so it cover for the text, if you want all that text in the same div then put it all under one Div tag.
我不明白你在问什么，似乎 jsfiddle 就是你在这里问的。但是您总是可以将宽度设置为 100% 以便它覆盖文本，如果您希望所有文本都在同一个 div 中，那么将它们全部放在一个 Div 标签下。
回答by Bandon
Is this what you want?
这是你想要的吗？
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}<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>