CSS 实现当文本内容过长时，中间显示省略号...,两端正常展示

What are we doing?

我们的核心诉求是在文本超出容器宽度时显示省略号，并在鼠标悬停时显示完整文本，适用于需要在列表或表格中显示大量文本数据的情况，特别是当空间有限且需要保持界面整洁时。

• 使用 CSS 的 text-overflow、white-space 和 overflow 属性来实现文本的省略效果。
• 利用 CSS 伪元素 ::before 和 HTML 的 title 属性来显示完整的文本提示。
• 通过 direction 属性改变文本方向，使省略号显示在左侧。

HTML 结构

HTML 结构由一个包含多个列表项的无序列表组成。每个列表项（li）都有一个 .wrap 类，它包含两个 span 元素：.txt 用于显示文本内容，.title 用于在文本超出时显示省略号。

<ul class="con">
    <li class="wrap">
        <span class="txt">CSS 实现优惠券的技巧 - 2021-03-26</span>
        <span class="title" title="CSS 实现优惠券的技巧 - 2021-03-26">CSS 实现优惠券的技巧 - 2021-03-26</span>
    </li>
    <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>
    <li class="wrap">
        <span class="txt">CSS 拖拽?</span>
        <span class="title" title="CSS 拖拽?">CSS 拖拽?</span>
    </li>
    <li class="wrap">
        <span class="txt">CSS 文本超出自动显示title</span>
        <span class="title" title="CSS 文本超出自动显示title">CSS 文本超出自动显示title</span>
    </li>
</ul>

CSS 样式

• .con 类定义了整个列表的样式，包括字体大小、颜色、宽度、边距、边框圆角、内边距、溢出隐藏、水平调整大小和阴影效果。
• .wrap 类定义了列表项的样式，包括相对定位、行高、高度、内边距、溢出隐藏和背景颜色。.wrap:nth-child(odd) 选择器为奇数列表项设置了不同的背景颜色。
• .title 类定义了显示省略号的文本容器的样式。它使用了 ::before 伪元素来创建一个内容为 title 属性值的浮动元素，该元素的宽度设置为 50%，并且使用了 text-overflow: ellipsis; 来显示省略号。direction: rtl; 用于改变文本方向，使得省略号出现在左侧。

.con {
    font-size: 14px;
    color: #666;
    width: 600px;
    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;
}

注意事项

• 确保每个 .title 元素都有一个 title 属性，以便在文本被截断时显示完整的文本。
• 由于使用了 direction: rtl;，这种方法可能不适用于从右到左（RTL）语言的文本。