大段文字中间显示省略号完美解决方案

这两天遇到一个需求，一个网站的链接部分需要让中间显示省略号。

这给我搞得有点儿挠头，超出打点这种常规需求咱们就不用多赘述了，最常见的一般就是单行超出打点和多行溢出打点，中间打点这还一时间有点儿蒙圈。

详细分析了一下给出了两种解决方案。

纯CSS解决方案

<div style="width: 20%;" title="被打还手即互殴”成历史，14至18岁未成年人违法可拘留">
    <div class="ellipsis-text">被打还手即互殴”成历史，14至18岁未成年人违法可拘留</div>
    <div class="ellipsis-text-rtl">被打还手即互殴”成历史，14至18岁未成年人违法可拘留</div>
</div>

<style>
.ellipsis-text {
    width: 40%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.ellipsis-text-rtl {
    width: 60%;
    direction: rtl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    display: inline-block;
}
</style>

原理

主要就是利用单行打点机制，把长段文字切割成两段。

一段从左往右显示，超出部分打点。一段从右往左显示，超出部分裁剪。这样两段文字拼接在一起就可以达到中间省略号效果了。

Ps: 有个致命的BUG，超出部分裁剪会出现半个字符的情况，没有想到好的解决方案。

CSS+JS解决方案

<div style="width: 20%;" title="被打还手即互殴”成历史，14至18岁未成年人违法可拘留">
    <div class="ellipsis-text">被打还手即互殴”成历史，14至18岁未成年人违法可拘留</div>
    <div class="ellipsis-text-rtl">{{ value }}</div>
</div>

// css相同

<script>
    // 倒数8个字符截取一下
    value = originalText.slice(-8);
</script>

原理

Js主要是为了解决CSS的字符截取问题。其他部分一样。