如何使用CSS防止列表项中的换行符

HTML CSS

Harry小小

2020-03-18

我正在尝试使用标签在菜单中放置一个名为“ 提交简历”的链接li。由于两个单词之间存在空格，因此将其包装为两行。如何防止CSS包裹？

第2042篇《如何使用CSS防止列表项中的换行符》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答

阳光凯 2020.03.18

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

MandyNear米亚 2020.03.18

如果内容较大以适合一行，则可以添加以下代码片段以在行尾添加漂亮的“…”：

li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}

Eva小胖 2020.03.18

显示：inline-block; 将防止列表项中的单词之间出现中断

 li {
    display: inline-block;
 }

梅猪猪 2020.03.18

如果要有选择地实现此目的（即：仅到达该特定链接），则可以使用不间断的空间而不是普通的空间：

<li>submit&nbsp;resume</li>

编辑：我知道这是HTML，而不是OP要求的CSS，但有些人可能会觉得有帮助…

StafanPro小哥 2020.03.18

使用white-space: nowrap;¹，或通过将li的width 设置为更大的值来给该链接更多的空间。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android