长文字中间省略号(纯css版）

最新推荐文章于 2024-07-24 10:23:02 发布

青石123456

最新推荐文章于 2024-07-24 10:23:02 发布

阅读量331

点赞数 5

文章标签： css css3

本文链接：https://blog.csdn.net/qq_36217816/article/details/137829033

版权

本文介绍如何使用CSS处理长标题，如实现优惠券标题的省略显示，确保在有限空间中提供清晰的提示信息。

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

仅做记录使用，html如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>中间省略号</title>
    
  </head>
  <body>
    <ul class="ulBox">
      <li class="wrap">
        <span class="txt"
          >CSS
          测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是
          实现优惠券的技巧 - 2021-03-26</span
        >
        <span
          class="title"
          title="CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26"
          >CSS
          测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是
          实现优惠券的技巧 - 2021-03-26</span
        >
      </li>
    </ul>
  </body>
</html>

下面是css部分

<style>
      .ulBox {
        font-size: 14px;
        color: #666;
        width: 300px;
        margin: 50px auto;
        border-radius: 8px;
        padding: 15px;
        overflow: hidden;
        resize: horizontal;
        box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
      }

      .wrap {
        position: relative;
        line-height: 2;
        height: 2em;
        padding: 0 10px;
        overflow: hidden;
        background: #fff;
        margin: 5px 0;
      }

      .wrap:nth-child(odd) {
        background: #f5f5f5;
      }

      .title {
        display: block;
        position: relative;
        background: inherit;
        text-align: justify;
        height: 2em;
        overflow: hidden;
        top: -4em;
      }

      .txt {
        display: block;
        max-height: 4em;
      }
      .title::before {
        content: attr(title);
        width: 50%;
        float: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        direction: rtl;
      }
    </style>