文本溢出显示省略号

sunnyxd 发布于2019-08-30 15:53 / 3478人阅读

摘要：一单行文本溢出前提要设置宽度超出隐藏省略号不换行二多行文本溢出方法一利用定位实现。该方法适用范围广，但文字未超出行的情况下也会出现省略号可结合优化该方法。设置显示获取字符串的字数截取字符串多余的用省略号显示参考文章链接

一、单行文本溢出

width: 300px;/*前提要设置宽度*/
overflow: hidden;/*超出隐藏*/
text-overflow: ellipsis;/*省略号*/
white-space: nowrap;/*不换行*/

二、多行文本溢出

方法一：利用定位实现。该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

p {
    width: 300px;/*可选*/
    position: relative;
    line-height: 20px;
    height: 60px;/*显示3行*/
    overflow: hidden;
    padding: 2px 10px;
}
p::after {
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
}

需要注意的几点：

利用height和line-height的倍数关系调整需要显示的行数，防止超出的文字露出。

给p::after添加渐变背景可避免文字只显示一半。

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

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

方法二：利用WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端。

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

需要注意：

display: -webkit-box; 将对象作为弹性伸缩盒子模型显示。

-webkit-line-clamp; 用来限制在一个块元素显示的文本的行数。

-webkit-box-orient; 设置或检索伸缩盒对象的子元素的排列方式。

方法三：使用JavaScript。

$(".class").each(function(){
  //设置显示获取字符串的字数
  var maxwidth=280;   
  if($(this).text().length>maxwidth){
     //截取字符串
     $(this).text($(this).text().substring(0,maxwidth));
     //多余的用省略号显示
     $(this).html($(this).html()+"...");
   }
});

参考文章链接:http://caibaojian.com/multili...

云服务器 GPU云服务器 php文本溢出省略溢出文本 html省略显示文本显示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116774.html

【效果实现】在照片上面显示一段文字，最多两行，多余部分用省略号表示

摘要：思路照片上面显示文字，怎么实现呢将照片作为的背景呀效果图多行文本溢出显示我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字单行文本溢出思路：照片上面显示文字，怎么实现呢？将照片作为div的背景呀！效果图： showImg(https://segmentfault.com/img/bVbuV...

PascalXie 2019-08-02 15:32 评论0 收藏0
【效果实现】在照片上面显示一段文字，最多两行，多余部分用省略号表示

摘要：思路照片上面显示文字，怎么实现呢将照片作为的背景呀效果图多行文本溢出显示我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字单行文本溢出思路：照片上面显示文字，怎么实现呢？将照片作为div的背景呀！效果图： showImg(https://segmentfault.com/img/bVbuV...

alaege 2019-08-30 11:22 评论0 收藏0
前端面试题-文本溢出显示省略号（...）

摘要：当文本溢出包含元素时，显示省略符号来代表被修剪的文本。文本不会换行，文本会在在同一行上继续，直到遇到标签为止。说明限制在一个块元素显示的文本的行数。将对象作为弹性伸缩盒子模型显示。，在多行文本的情况下，用省略号隐藏超出范围的文本。一、文本溢出隐藏如下图所示，我们需要对溢出文本进行...显示的操作，单行多行的情况都有（具体几行得看设计的心情） showImg(https://segm...

AprilJ 2019-08-30 14:08 评论0 收藏0
前端面试题-文本溢出显示省略号（...）

摘要：当文本溢出包含元素时，显示省略符号来代表被修剪的文本。文本不会换行，文本会在在同一行上继续，直到遇到标签为止。说明限制在一个块元素显示的文本的行数。将对象作为弹性伸缩盒子模型显示。，在多行文本的情况下，用省略号隐藏超出范围的文本。一、文本溢出隐藏如下图所示，我们需要对溢出文本进行...显示的操作，单行多行的情况都有（具体几行得看设计的心情） showImg(https://segm...

Donald 2019-08-22 15:20 评论0 收藏0
前端面试题-文本溢出显示省略号（...）

摘要：当文本溢出包含元素时，显示省略符号来代表被修剪的文本。文本不会换行，文本会在在同一行上继续，直到遇到标签为止。说明限制在一个块元素显示的文本的行数。将对象作为弹性伸缩盒子模型显示。，在多行文本的情况下，用省略号隐藏超出范围的文本。一、文本溢出隐藏如下图所示，我们需要对溢出文本进行...显示的操作，单行多行的情况都有（具体几行得看设计的心情） showImg(https://segm...

CHENGKANG 2019-08-01 18:41 评论0 收藏0