css设置文字不换行溢出显示省略号的方法：
HTML：
<p class="content">
这是一个demo
这是一个demo
这是一个demo
这是一个demo
这是一个demo
这是一个demo
这是一个demo
这是一个demo
这是一个demo
这是一个demo
这是一个demo
这是一个demo
</p>css：
.content {
width: 500px;
/* 控制文字不换行 */
white-space: nowrap;
/* 文字溢出以省略号显示 */
text-overflow: ellipsis;
/* 溢出隐藏 */
overflow: hidden;
}效果如下：
white-space：
white-space 属性设置如何处理元素内的空白。
这个属性声明建立布局过程中如何处理元素中的空白符。
text-overflow：
text-overflow属性指定当文本溢出包含它的元素，应该发生什么。
语法：text-overflow: clip|ellipsis|string;
overflow：
overflow 属性规定当内容溢出元素框时发生的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
更多相关知识请关注web前端课程
以上就是css怎么设置文字不换行溢出显示省略号？的详细内容，更多请关注易知道|edz.cc其它相关文章！
