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

效果

代码

htmlcss

html

<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 {
  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;
}

思路解析

文字内容的父级标签li设置line-height: 2;、overflow: hidden;、height: 2em;，因此li标签的高度是当前元素字体大小的2倍，行高也是当前字体大小的2倍，同时内容若溢出则隐藏。
li 标签内部有两个 span 标签，二者的作用分别是：类名为.txt的标签用来展示不需要省略号时的文本，类名为.title用来展示需要省略号时的文本，具体是如何实现的请看第五步。
给.title设置伪类before，将伪类宽度设置为50%，搭配浮动float: right;，使得伪类文本内容靠右，这样设置后，.title和伪类就会各占父级宽度的一半了。
.title标签设置text-align: justify;，用来将文本内容和伪类的内容两端对齐。
给伪类before设置文字对齐方式direction: rtl;，将伪类内的文本从右向左流动，即right to left，再设置溢出省略的css样式就可以了。
.title标签设置了top: -4em,.txt标签设置max-height: 4em;这样保证.title永远都在.txt上面，当内容足够长，.txt文本内容会换行，导致高度从默认2em变为4em，而.title位置是-4em，此时正好将.txt覆盖掉，此时显示的就是.title标签的内容了。

知识点：text-align: justify;

文本的两端（左边和右边）都会与容器的边缘对齐。
为了实现这种对齐，浏览器会在单词之间添加额外的空间。这通常意味着某些单词之间的间距会比其他单词之间的间距稍大一些。
如果最后一行只有一个单词或少数几个单词，那么这些单词通常不会展开以填充整行，而是保持左对齐。

TIP

需要注意的是，text-align: justify; 主要用于多行文本。对于单行文本，这个值的效果与 text-align: left; 相同，因为单行文本无法两端对齐。

参考资源

传送门

原文地址

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

效果 ​

代码 ​

思路解析 ​

参考资源 ​

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

效果

代码

思路解析

参考资源