css3溢出文本属性------text-overflow

css3溢出文本属性 text-overflow

在网页制作中，经常遇到内容溢出的问题，如文章列表标题过长，而其宽度又受到限制，此时超出宽度的内容就会以省略标记（...）显示。

以前实现这种效果是通过后台程序截取一定数量的字符在前端显示，或者是用js截取一定数量字符数显示，但是这两种方式都存在不足之处，如中文和英文的计算字符宽度不同等。css3新增的text-overflow属性就解决了这样的问题

基本语法：

text-overflow: clip | ellipsis;

clip: 不显示省略标记（...），只是简单的剪裁

ellipsis：文本溢出时显示省略标记（...），省略标记插入最后一个字符位置

注意：要实现文本溢出时裁切文本显示省略标记（...）的效果，需要配合使用white-space:nowrap（强制文本在一行显示），overflow: hidden（文本溢出内容隐藏）。

eg:       text-overflow:clip

<div class="text-overflow">dfjkefjeijfsdf我饿减肥减肥日国家加快了速度来发发看多少分开始的两个款风格地方看到了疯狂</div>

css样式：

.text-overflow{
    width: 200px;
    height: 40px;
    border: 1px solid red;
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
}

效果图：

eg2:          text-overflow:ellipsis

css样式：

.text-overflow{
    width: 200px;
    height: 40px;
    border: 1px solid red;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

效果图：