多行文本溢出显示省略号(兼容ie)

最新推荐文章于 2024-08-18 10:54:49 发布

小小心晴已存在

最新推荐文章于 2024-08-18 10:54:49 发布

阅读量2.1k

点赞数

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_22103707/article/details/119893846

版权

本文介绍了如何在IE浏览器中使用float布局解决多行文本溢出时显示省略号的问题。详细阐述了布局原理，并通过CSS代码示例展示了高度固定和自适应两种情况下的实现方法，最后提到了使用max-height和flex布局进行高度自适应的技巧。

摘要由CSDN通过智能技术生成

需求： ie下多行文本超出隐藏显示省略号

解决方案：float布局

代码：

html:

<div class="fix-height">
        <div class="text">这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很        长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长</div>
</div>

css:

    .height-fixed {
      height: 40px;
      overflow: hidden;
      line-height: 20px;
    }
    .height-fixed .text {
      float: right;
      width: 100%;
      margin-left: -5px;
      word-break: break-all;
    }
    .height-fixed::before {
      float: left;
      width: 5px;
      content: "";
      height: 100%;
    }
    .height-fixed::after {
      float: right;
      content: "...";
      height: 20px;
      line-height: 20px;
      width: 16px;
      /* 40 = 省略号长度 + padding-left长度 */
      margin-left: -40px;
      padding-left: 24px;
      /* 真实长度 小于等于5 */
      padding-ri