文本溢出省略号方案

最新推荐文章于 2024-08-22 11:20:46 发布

置顶喵大叔、

最新推荐文章于 2024-08-22 11:20:46 发布

阅读量394

点赞数 2

分类专栏：日常积累文章标签： css文本超出省略号文本溢出省略号解决方案

本文链接：https://blog.csdn.net/weixin_43990297/article/details/102932142

版权

日常积累专栏收录该内容

35 篇文章 1 订阅

订阅专栏

第一种，单行文本溢出变成省略号

单行文本溢出变成省略号，css控制，核心代码:

overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容）
white-space: nowrap；（设置文字在一行显示，不能换行）
text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本）

优点

兼容好
省略号出现的位置合适
超出范围才会出现省略号

缺点

只支持单行文本截断

demo

<style>
    .demo {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<body>
	<div class="demo">这是一段很长的文这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本本</div>
</body>

第二种多行文本溢出

css 控制

核心 CSS 语句

	-webkit-line-clamp: 2；（表示超出几行变省略号）
	display: -webkit-box；
	-webkit-box-orient: vertical；
	overflow: hidden；
	text-overflow: ellipsis；

优点

文本溢出范围才显示省略号，否则不显示省略号
响应式截断
多适用于移动端页面

缺点

兼容性不好，只适用于内核为webkit的浏览器，如果在IE上就会失效，在IE上可以对外层盒子设置固定高度来控制，但是就不会出现省略号了

使用js来控制

优点

兼容性好

缺点

需要 JS 实现
文本为中英文混合时，或者纯英文时，省略号显示位置略有偏差，需要去手动修改调整js

demo

<div class="demo1">
    建设大街圣诞节是近建设大街圣诞节是近段时间的计算机看得见风景的愤怒的范德萨发你的双方能否第三方电脑上面发的什么风都是模仿你的酸辣粉打什么都是，浪费你到底魔方大厦，浪费的说法，。建设大街圣诞节是近段时间的计算机看得见风景的愤怒的范德萨发你的双方能否第三方电脑上面发的什么风都是模仿你的酸辣粉打什么都是，浪费你到底魔方大厦，浪费的说法，。建设大街圣诞节是近段时间的计算机看得见风景的愤怒的范德萨发你的双方能否第三方电脑上面发的什么风都是模仿你的酸辣粉打什么都是，浪费你到底魔方大厦，浪费的说法，。段时间的计算机看得见风景的愤怒的范德萨发你的双方能否第三方电脑上面发的什么风都是模仿你的酸辣粉打什么都是，浪费你到底魔方大厦，浪费的说法，。
    但是，麻烦第三方地方的开发地方</div>


<script type="text/javascript">

  const formatStr = () => {
    const ele = document.getElementsByClassName('demo1')[0]; // 文字盒子
    let text = ele.innerHTML // 盒子的内容
    const totalTextLen = text.length; // 内容长度
    const lineNum = 3; // 行数
    const baseWidth = window.getComputedStyle(ele).width; // 盒子宽度

    const baseFontSize = window.getComputedStyle(ele).fontSize; // 字体大小

    const lineWidth = +baseWidth.slice(0, -2); // 一行的宽度  跟盒子宽度一致  用slice是为了截取掉单位px
    // 所计算的strNum为元素内部一行可容纳的字数(不区分中英文)
    const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));

    let content = '';

    // 多行可容纳总字数
    const totalStrNum = Math.floor(strNum * lineNum);

    const lastIndex = totalStrNum - totalTextLen;

    if (totalTextLen > totalStrNum) {
      content = text.slice(0, lastIndex - 3).concat('...');
    } else {
      content = text;
    }
    ele.innerHTML = content;
  }

  formatStr();

  window.onresize = () => {
    formatStr();
  };
</script>

使用css利用 Float 特性，纯 CSS 实现多行省略

优点

无兼容问题
文本溢出范围才显示省略号，否则不显示省略号

缺点

省略号显示可能不会刚刚好，有时会遮住一半文字
适用于对省略效果要求较低的页面

demo

 .demo {
      max-height: 40px;
      line-height: 20px;
      overflow: hidden;
    }

    .demo::before {
      float: left;
      content: '';
      width: 20px;
      height: 40px;
    }

    .demo .text {
      float: right;
      width: 100%;
      margin-left: -20px;
      word-break: break-all;
    }

    .demo::after {
      float: right;
      content: '...';
      width: 20px;
      height: 20px;
      position: relative;
      left: 100%;
      transform: translate(-100%, -100%);
      background: #fff;
    }

  <div class="demo">
    <div class="text">
      That's the basic idea. You can imagine the light blue region as the title, and the yellow region as the ellipsis.
      Then you may think that the pink box takes up space, but will the title be delayed as a whole? Here you can come
      out by the negative value of margin. Set the negative value of the pale blue box to be the same width as the pink
      box, and the title can also be displayed normally.
    </div>
  </div>

参考于https://juejin.im/post/5dc15b35f265da4d432a3d10#heading-9