Html 如何使用 CSS 防止列表项中的换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1383143/
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
How to prevent line breaks in list items using CSS
提问by Rajasekar
I'm trying to put a link called Submit resumein a menu using a litag. Because of the whitespace between the two words it wraps to two lines. How to prevent this wrapping with CSS?
我正在尝试使用标签在菜单中放置一个名为Submit resume的链接li。由于两个单词之间的空格，它会换行为两行。如何防止这种用 CSS 包装？
回答by n1313
Use white-space: nowrap;[1] [2]or give that link more space by setting li's width to greater values.
使用white-space: nowrap;[1] [2]或通过将li的宽度设置为更大的值来为该链接提供更多空间。
[1]§ 3. White Space and Wrapping: the white-space property - W3 CSS Text Module Level 3
[2]white-space - CSS: Cascading Style Sheets | MDN
[1] § 3. White Space and Wrapping: the white-space property - W3 CSS Text Module Level 3
[2] white-space - CSS: Cascading Style Sheets | MDN
回答by JimmyRare
You could add this little snippet of code to add a nice "…" to the ending of the line if the content is to large to fit on one line:
如果内容太大而无法放在一行中，您可以添加这个小代码片段以在行尾添加一个漂亮的“...”：
li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
回答by ptim
If you want to achieve this selectively (ie: only to that particular link), you can use a non-breaking space instead of a normal space:
如果您想有选择地实现这一点（即：仅针对该特定链接），您可以使用不间断空格而不是普通空格：
<li>submit resume</li>
https://en.wikipedia.org/wiki/Non-breaking_space#Encodings
https://en.wikipedia.org/wiki/Non-breaking_space#Encodings
edit: I understand that this is HTML, not CSS as requested by the OP, but some may find it helpful…
编辑：我知道这是 HTML，而不是 OP 要求的 CSS，但有些人可能会觉得它有帮助......
回答by Nadeesh Peiris
display: inline-block;will prevent break between the words in a list item
显示：内联块；将防止列表项中的单词之间的中断
li {
display: inline-block;
}
回答by Yevgeniy Afanasyev
Bootstrap 4 has a class named text-nowrap. It is just what you need.
Bootstrap 4 有一个名为text-nowrap. 这正是您所需要的。
