[分享]css不换行超出部分省略

CSS是网页设计必不可少的技术之一，可以实现许多页面的美化效果，如字体大小、颜色、边框等。而今天我们要谈的是CSS的一个非常实用的属性——省略号。在Web设计中，我们经常会遇到超出部分无法显示的情况。...

CSS是网页设计必不可少的技术之一，可以实现许多页面的美化效果，如字体大小、颜色、边框等。而今天我们要谈的是CSS的一个非常实用的属性——省略号。

在Web设计中，我们经常会遇到超出部分无法显示的情况。比如说，在一个固定宽度的容器中，文字内容太长，超过了容器的宽度。这时候如果不对文字进行处理，页面就会显得非常不美观。

那么如何解决这个问题呢？这时我们可以使用CSS属性“text-overflow:ellipsis”，该属性可以让超出部分显示省略号。

.container{
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
} 

以上代码中，“width:200px”是设置容器宽度为200px，“overflow:hidden”是把超出部分隐藏掉，“whitespace:nowrap”是让文字内容不换行，“text-overflow:ellipsis”则是让超出部分用省略号表示。

这样一来，当文字内容超出容器宽度时，显示的就是省略号了，而不是内容溢出影响页面美观。

同时值得一提的是，该属性在IE6、IE7浏览器中不支持。在IE8以上的版本、Firefox、Chrome、Safari等现代浏览器中都支持该属性。

以上就是省略号属性的简单介绍，希望对大家有所帮助。