利用css实现文字一行内展示，超出一行，内容中间显示省略号

最新推荐文章于 2024-11-21 09:56:25 发布

原创最新推荐文章于 2024-11-21 09:56:25 发布 · 1.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

本文介绍了如何使用CSS实现文本内容在指定宽度下一行内展示，当内容超出时自动在中间显示省略号的技术，通过父元素和两个子元素配合以及伪元素的使用来达到效果。

利用css实现文字一行内展示，超出一行，内容中间显示省略号

思路：

父元素只展示一行，溢出隐藏。
内容分为两个元素展示，当文案内容未超过一行时展示第一个元素，文案超出一行时，展示第二个元素。
第二个元素内分before和 innnerText, 伪元素使用float布局。

实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>利用css实现文字一行内展示，超出一行，内容中间显示省略号</title>
  </head>
  <body>
    <style>
      .warp {
        width: 300px;
        /* 需要固定展示高度 且行高应与展示高度一致 */
        line-height: 2em;
        height: 2em;
        /* 仅展示一行 */
        overflow: hidden;
        /* 重要 必须设置背景色 以在文字溢出换行时将原文字覆盖 */
        background-color: #fff; 
        resize: horizontal;
      }
      .content {
        max-height: 4em;
      }
      .overflow {
        display: block;
        position: relative;
        /* 重要 重新设置背景色将原文字覆盖 */
        background: inherit;
        top: -4em;
        height: 2em;
        overflow: hidden;
        text-align: justify;
      }
      .overflow::before {
        content: attr(data);
        width: 50%;
        float: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        direction: rtl;
      }
    </style>
    <div class="warp">
      <div class="content">
        利用css实现文字一行内展示，超出一行，内容中间显示省略号
      </div>
      <div
        class="overflow"
        data="利用css实现文字一行内展示，超出一行，内容中间显示省略号"
      >
        利用css实现文字一行内展示，超出一行，内容中间显示省略号
      </div>
    </div>
  </body>
</html>