如何使用CSS防止列表项中的换行符-Java 学习之路

439

我正在尝试使用 li 标记在菜单中放置一个名为Submit resume的链接 . 由于两个单词之间的空白，它包含两行 . 如何用CSS防止这种包装？

5 回答

130

使用 white-space: nowrap; 1，或通过将 li 的宽度设置为更大的值来为该链接提供更多空间 .

回复于 2024-05-11T19:21:36+08:00
7
您可以添加这一小段代码，如果内容大到适合一行，则在行尾添加一个漂亮的“...”：
```
li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}
```
回复于 2024-05-11T19:21:36+08:00
1
如果你想有选择地实现这个目标（即：只对那个特定的链接），你可以使用一个不间断的空间而不是一个普通的空间：
```
<li>submit&nbsp;resume</li>
```
http://en.wikipedia.org/wiki/Wikipedia:Line-break_handling#.26nbsp.3B

编辑：我知道这是HTML，而不是OP要求的CSS，但有些人可能会发现它有用......
回复于 2024-05-11T19:21:36+08:00
31
display: inline-block; 将阻止列表项中的换行符

http://jsfiddle.net/Nash171/mwe4s0nc/46/
```
li{
    display: inline-block;
 }
```
回复于 2024-05-11T19:21:36+08:00
860

Bootstrap 4有一个名为 text-nowrap 的类 . 这正是你所需要的 .

回复于 2024-05-11T19:21:36+08:00