css处理 单行文字超出 显示省略号
我们再工作中经常会碰见 文章标题过长的 题目 这个时候我们要用到 超出部分显示省略号
<a href="">
css处理单行文本溢出显示省略号, css处理单行文本溢出显示省略号, css处理单行文本溢出显示省略号, css处理单行文本溢出显示省略号, css处理单行文本溢出显示省略号,
</a>
经常是碰见a标签包括,当然也有h1-h6 标题标签 和p标签
我这里是拿a标签来举列子 因为我碰见的证是 a标签
如果不设置的话 屏幕上会出现 很长的文字标题 显然不是我们想要的
不说废话了直接上样式
a{
display: block;//将a标记变成块级元素
width: 100px;//宽度设置为100
overflow: hidden; //超出则隐藏
white-space: nowrap;//不设置换行
text-overflow: ellipsis;//这个是设置省略号
}
重点是这三个家伙
overflow: hidden; //超出则隐藏
white-space: nowrap;//不设置换行
text-overflow: ellipsis;//这个是设置省略号
最后就实现了 主要是这个样式 单词太难记 但还是经常会碰见 所以建议童鞋把这个记住