css3文字超出隐藏 |css名片

CSS3的文字超出隐藏功能是现代网页设计中非常有用的一项功能。当文字内容超过容器的尺寸或者宽高比例不合适时，大家就需要利用CSS3的超出隐藏样式进行处理。 使用CSS3的超出隐藏样式非常简单，大家只需要在目标元素的样式表中加入以下样式： “` text-overflow:ellipsis; white-space:nowrap; overflow:hidden; “` 这三行代码可以将文字超出的部分隐藏起来，同时在末尾加上省略号以示截断。其中text-overflow属性表示在垂直或水平方向上内容超出容器时的显示方式，其值可以是： – clip：超出容器时截断展示。 – ellipsis：超出容器时显示省略号。 – string：超出容器时显示指定的字符串。 而white-space属性值为nowrap则表示禁止文字换行，overflow:hidden则表示超出的部分隐藏。 以下是一个简单的使用文字超出隐藏样式处理的例子：

<style type="text/css">
	.news{
width:400px;
height:80px;
line-height:20px;
overflow:hidden;
border:1px solid #ccc;
padding:10px;
text-overflow:ellipsis;
white-space:nowrap;
	}
</style>
<p class="news"> 今天是个大晴天，阳光明媚，空气清新，鸟语花香，人在其中真是惬意。</p>

以上代码中，大家设置了宽度为400px、高度为80px的段落元素，并将溢出部分隐藏起来，同时在文字末尾加上了省略号。如果您在CSS3的文字处理中遇到任何问题，欢迎咨询网页设计专家或者前端开发人员。