css文本溢出时候，如何把多余的文字显示省略号

最新推荐文章于 2024-02-27 14:31:14 发布

Lazy_idle

最新推荐文章于 2024-02-27 14:31:14 发布

阅读量1.2k

点赞数 3

分类专栏： Web前端文章标签： css html js

本文链接：https://blog.csdn.net/KOkomo_Tender/article/details/119357363

版权

Web前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

css文本溢出时候，如何把多余的文字显示省略号

日常做的项目中常常有这种需要我们对溢出文本进行"…"显示的操作（我也是通过一行文字到下一行，破坏了我的布局，所以才去找各种办法，然后做了总结），单行多行的情况都有，以下就是解决的办法，如有不合适的直接联系作者，我看到之后会回复你的。

单行

代码：

    overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap

示例：

在自己的css中设置的代码：

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight:normal;
    font-size: 14px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

示例：文本溢出显示省略号,文本溢出显示省…

多行：

1.直接用css属性设置(只有-webkit内核才有作用)

代码：

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端；

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
display: -webkit-box 将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式。
text-overflow: ellipsis 以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
.box {
    width: 400px; 
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
		</style>
	</head>
	<body>
		<div class="box">
			如果是一个容器里很多文字，最后的效果是要容器最后除了点点点还有操作文字例如如果是一个容器里很多文字，
			最后的效果是要容器最后除了点点点还有操作文字例如如果是一个容器里很多文字，
			最后的效果是要容器最后除了点点点还有操作文字例如如果是一个容器里很多文字，
			最后的效果是要容器最后除了点点点还有操作文字例如如果是一个容器里很多文字，
			最后的效果是要容器最后除了点点点还有操作文字例如
		</div>
	</body>
</html>

2.利用伪类

代码：

<div id="con">
  <span id="txt">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略</span>
  <span class="t"></span>
</div>
<style>
#txt{
  display: inline-block;
  height: 40px;
  width: 250px;
  line-height: 20px;
  overflow: hidden;
  font-size: 16px;
}
.t:after{
  display: inline;
  content: "...";
  font-size: 16px;
	
}
</style>

示例：

3.利用绝对定位和padding;(跨浏览器解决方案)

看到上面的标题是不是觉得“哇，终于可以跨浏览器使用了”，但你这样想的时候有没有考虑过IE的感受？IE6/7是没有伪类的，你看，你大爷还是你大爷，就是厉害啊，虽然IE6已经退出市场，但是IE7还是需要兼容的，所以，聪明的我又想到一个巧妙的办法，亲测，完全可行。

代码：

<p id="con2">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略<span class="t2">...</span>
</p>
<style>
#con2{
  position: relative;
  height: 40px;
  width: 250px;
  line-height: 20px;
  overflow: hidden;
  padding-right: 12px;
}  
.t2{
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>

这个方法的原理是：首先在包含文字的元素里，嵌入一个<span>...</span>，然后包含文字的元素右侧留出...的位置(padding-right),最后利用绝对定位将...定位至右侧的padding-right区域

第二个和第三个办法也算是一个偷懒的办法，但是以上的这两种办法都不会真正的去隐藏，因为省略号是我自己打进去的，而不像单行的，它是完全可以实现的。。。。。。。

我查了别的博主的资料，目前我还没发现如果不到两行的时候怎么去用css解决，但是吧，css干不了的时候，我们可以采用js。

首先是jQuery限制字符字数的方法：

//限制字符个数
$(".zxx_text_overflow").each(function(){
  var maxwidth=23;
  if($(this).text().length > maxwidth){
    $(this).text($(this).text().substring(0,maxwidth));
    $(this).html($(this).html()+'...');
  }
});

jQuery自动判断宽度是否超出的方法

相比较前面一种方法，这个js实现的方法更加智能些（也更占用资源），通过复制节点（就是需要判断是否文字溢出省略号显示的标签层），获取其宽度，再判断其宽度是否大于样式中给定的宽度限值，大于则去掉尾部字符，添加省略号，循环，直到复制的层的宽度小于css给定值。
js代码如下：

var wordLimit=function(){
  $(".zxx_text_overflow").each(function(){
    var copyThis = $(this.cloneNode(true)).hide().css({
      'position': 'absolute',
      'width': 'auto',
      'overflow': 'visible'
    });
    $(this).after(copyThis);
    if (copyThis.width()>$(this).width()) {
      $(this).text($(this).text().substring(0, $(this).html().length-4));
      $(this).html($(this).html()+'...');
      copyThis.remove();
      wordLimit();
    } else {
      //清除复制
      copyThis.remove(); 
    }
  });
}
wordLimit();

css给个宽度：

.zxx_text_overflow { width: 400px; }

总结

总结

推荐使用多行的第一种办法，因为css简单，而且不想js这么占用资源，目前这个办法办法可以实现，但是IT技术发展迅速，以后说不定有更好的办法，

Lazy_idle

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
css文本溢出时候，如何把多余的文字显示省略号

css文本溢出时候，如何把多余的文字显示省略号日常做的项目中常常有这种需要我们对溢出文本进行"…"显示的操作（我也是通过一行文字到下一行，破坏了我的布局，所以才去找各种办法，然后做了总结），单行多行的情况都有，以下就是解决的办法，如有不合适的直接联系作者，我看到之后会回复你的。单行代码： overflow:hidden; text-overflow:ellipsis; white-space:nowrap示例：在自己的css中设置的代码：h1,h2,h3,h4,h5,h6
复制链接

扫一扫