文字溢出时如何使溢出部分显示为 ...

最新推荐文章于 2024-06-05 09:45:20 发布

某猫不吃鱼

最新推荐文章于 2024-06-05 09:45:20 发布

阅读量1.1w

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/moumaobuchiyu/article/details/56004377

版权

前端开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

css方式：

单行溢出

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>text-overflow</title>
<style type="text/css">
.test_demo{
    text-overflow:ellipsis;//值为clip表示剪切，ellipsis时为显示省略号
    overflow:hidden; 
    white-space:nowrap; 
    width:200px; 
    background:#ccc;
}
</style>
</head> 
<body>
<div class="test_demo">
  超酷的IT技术学习平台（我是省略号）
</div>
</body>
</html>

这里写图片描述

同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。关于word-wrap:break-word和word-break:break-all，可以看这个网址，很详细：你真的了解word-wrap和word-break的区别吗？

多行溢出
针对webkit内核的浏览器以及Opera浏览器：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>text-overflow</title>
<style type="text/css">
.test_demo{ 
    text-overflow:ellipsis;  
    overflow:hidden; 
    width:200px; //指定宽度
    background:#ccc;  
    display:-webkit-box;  
    -webkit-box-orient:vertical;  
    -webkit-line-clamp:3; //指定显示多少行
}
</style>
</head> 
<body>
<div class="test_demo">
  超酷的IT技术学习平台（我是省略号术学习平台（我是省略号我是省略号术学习平台（我是省略我是省略号术学习平台（我是省略
</div>
</body>
</html>

这里写图片描述
对于其他浏览器：比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现

p {

　　position: relative;

　　line-height: 1.4em;

　　height: 4.2em;

　　overflow: hidden;

}

p::after {

　　content: "...";

　　font-weight: bold;

　　position: absolute;

　　bottom: 0;

　　right: 0;

　　padding: 0 20px 1px 45px;

　　background: url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;

}

这里注意几点：

height高度正好是line-height的3倍；

结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；

IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用…去模拟；

要支持IE8，需要将::after替换成:after；

js插件方式：

更为好用的是使用jQuery插件-jQuery.dotdotdot:

$('.news-left-text').dotdotdot();//先要引入jquery.dotdotdot.js，然后选择文本段落，使用dotdotdot方法

某猫不吃鱼

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
文字溢出时如何使溢出部分显示为 ...

css方式：单行溢出<!DOCTYPE html><html><head> <meta charset="utf-8"><title>text-overflow</title><style type="text/css">.test_demo{ text-overflow:ellipsis;//值为clip表示剪切，ellipsis时为显示省略号 overflow:h
复制链接

扫一扫