单行多行文字超出部分隐藏展开收起，显示查看更多-无兼容性写法

最新推荐文章于 2024-04-20 17:59:05 发布

weixin_58555796

最新推荐文章于 2024-04-20 17:59:05 发布

阅读量1.2k

点赞数 19

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_58555796/article/details/135921706

版权

1.一行超出隐藏

.overTxtOne {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

2.多行超出

.overTxtMulti{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

但是往往在使用过程中，不一定是多少行，所以我们常用scss这样写

全局定义 由于经常用，所以定义在全局scss文件中  2代表默认值是超过两行时进行省略
@mixin overTxt($num: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: $num;
}

使用时 传如3代表超过三行时省略
.evalTitle {
  @include overTxt(3);
}

缺点：在macbook的safiri浏览器中和浮动相配合时布局奇奇怪怪，非webkit浏览器不支持该写法

与浮动配合示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      .text {
        width: 100px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .text::before {
        content: "11";
        display: block;
        float: right;
        width: 10px;
        height: 10px;
        background: red;
      }
    </style>
    <div class="text">浮动元素是如何定位的 正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流， 然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。</div>
  </body>
</html>

3.对于多行省略加查看更多的实现

网上有多种实现方法：

第一种先渲染然后js获取高度然后判断和盒子的高度大小，如果超出盒子高度则减去一个字符再渲染等多重循环后，最后得到刚刚好的结果减去几个字符串后加上显示查看更多

第二种是用js得到高度进行判断是否超出，如果超出则在末尾显示查看更多，可能存在显示半个字的情况，用css样式进行颜色过渡处理

。。。。

1.先写出基本样式：

    <div style="width: 200px;height: 60px;line-height: 20px; overflow: hidden;">
      <div>前</div>
      先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先
    </div>

展示如图，显然这不是我们想要的，第一点，“前”没有在右下角，第二点，没有省略号，别着急，咋一步一步来。

2.对于浮动不够理解的可以先来看看浮动，便于我们理解浮动。

    <div style="width: 200px;height: 60px;line-height: 20px; overflow: hidden;">
      <div style="float: right">首首</div>
      <div style="float: right">前前前前前前前前前前前前前前前前前前前前前前前前前前前前</div>
      先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先
    </div>

对于上面的代码，我们先对第一个元素进行了右浮动，“首”先会脱离文档流，然后在原始位置水平向右移动，直到碰到容器边缘才停止移动，因为此时body内还没有元素占位，所以12最后会出现在顶部右边，第二个元素“前”，一般来说浮动的元素会一行显示，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐，因此前会在首的下方排列，第三个元素先，因为浮动脱离标准流，所以会在开头就展示了先字，但问题是浮动是如何做文字坏绕效果的，不会与其他元素重叠吗，不会的，因为“脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行位置确定。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。”

3.接下来解决第一个问题，让展开展示在文字末尾，我们需要利用浮动环绕文字的特点，对展开进行右浮动,这样就达到了展开在右边并且被其他内容环绕

    <div style="width: 200px;height: 60px;line-height: 20px; overflow: hidden;">
      <div style="float: right;">前</div>
      先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先
    </div>

接下来我们需要把这个前放到第三行，实现有两种思路，

第一种是在“前”前面放一个元素，把整体往下压然后再把先往上调，如图；

    <div style="width: 200px;height: 60px;line-height: 20px; overflow: hidden;">
      <div style="height:40px"></div>
      <div style="float: right;">前</div>
      先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先
    </div>

再对先用盒子包裹给予一个负的margin值即可

   <div style="width: 200px;height: 60px;line-height: 20px; overflow: hidden;">
      <div style="height:40px"></div>
      <div style="float: right;">前</div>
      <div style="margin-top: -40px;">先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先</div> 
    </div>

第二种是利用浮动进行右边占位再对前进行清除浮动，这样对于”前“来说前面的div就是一个块级元素，clear:both即代表对象左边不允许有浮动、右边不允许有浮动，综上所以“前会例外一行展示”
    <div style="width: 200px;height: 60px;line-height: 20px; overflow: hidden;">
      <span style="float: right;height: 40px;width: 0px;"></span>
      <div style="float: right;clear: both">前</div>
      <div>先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先</div> 
    </div>
第一个问题解决了，接下来是第二个问题如何展示省略号呢，由于不能使用display: -webkit-box;，因为存在兼容性问题，所以我们自己写个三个点就可以了，顺便把“前”改为了按钮展开
    <div style="width: 200px;height: 60px;line-height: 20px; overflow: hidden;">
      <span style="float: right;height: 40px;width: 0px;"></span>
      <div style="float: right;clear: both">...<button style="height: 20px;margin-left: 10px;">展开</button></div>
      <div>先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先先</div> 
    </div>

4.接下来就是第二个问题，我们如何控制他显示不显示这个展开按钮和省略号呢，使用一个障眼法遮住一下就好了

添加<span style="width: 100%; height: 100%; position: absolute; background: #fff"></span> 并且给父亲div添加position:relative


    <div style="width: 200px; height: 60px; line-height: 20px; overflow: hidden">
      <span style="float: right; height: 40px; width: 0px"></span>
      <div style="float: right; clear: both">...<button style="height: 20px; margin-left: 10px">展开</button></div>
      <div>先先先先先先先先先先先先先先先</div>
      <span style="width: 100%; height: 100%; position: absolute; background: #fff"></span>
    </div>

这样当他在最后一行没有满的时候，可以保证不出现按钮，当最后一行放不下时才展示按钮

5.解决特殊情况，但是也许很快你就会发现这个问题

这个就只能用js进行判断内容高度和父亲高度然后是否显示查看更多进行处理

    <div id="parent" style="width: 200px; height: 60px; line-height: 20px; overflow: hidden; position: relative">
      <span style="float: right; height: 40px; width: 0px"></span>
      <div style="float: right; clear: both">...<button style="height: 20px; margin-left: 10px">展开</button></div>
      <div id="son">先先先先先先先先先先先</div>
      <span style="width: 100%; height: 100%; position: absolute; background: #fff"></span>
    </div>
    <script>
      let parent = document.getElementsByClassName(`parent`)?.[0];
      let son = document.getElementsByClassName(`son`)?.[0];
      if (!parent || !son) return;
      let isShow = parent.offsetHeight < son.offsetHeight;
    </script>

如果isShow是true就显示

当然这个要考虑屏幕变化情况，所以要监听屏幕，并且对其加上防抖和移除监听，在vue的写法

const show =ref(false)
function isShowed(){
  let parent = document.getElementsByClassName(`parent`)?.[0];
  let son = document.getElementsByClassName(`son`)?.[0];
  if (!parent || !son) return;
  show.value = parent.offsetHeight < son.offsetHeight;
}
let timeout: NodeJS.Timeout;
function updateIsShowed() {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
   isShowed()
  }, 1000);
}
onMounted(() => {
  isShowed()
  window.addEventListener("resize", updateIsShowed, true);
});
onUnmounted(() => {
  window.removeEventListener("resize", updateIsShowed, true);
});