字符串超出长度显示省略号

在HTML中文本超出容器宽度,就得显示省略号,不然会影响到CSS布局,很可能回到是样式崩掉。这里会有两种方式加省略号,一种是直接CSS,另外就是JavaScript

CSS加省略号(单行限制)

直接给显示的容器加上这个样式

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

为了方便使用,还是直接给个类名好一点,像这样

/* 文件超出显示省略号 */
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

然后就可以使用了,例如

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件超出显示省略号</title>
    <style>
        /* 文件超出显示省略号 */
        .ellipsis {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        /* 限定宽度 */
        p {
            width: 60px;
        }
    </style>
</head>

<body>
    <p class="ellipsis">CaptainTwo</p>
</body>

</html>

JavaScript加省略号

下面代码要用到上一篇文章封装的函数(获取字符串的宽度):

https://captaintwo.com/archives/px-width

/**
 * 字符串超出长度中间显示省略号
 * @param font 字体样式
 * @param max 最大长度
 */
String.prototype.ellipsis = function (font = "", max = length) {
    // 最大长度不规范
    if (!isFinite(max) || max === 0) return this;
    // 获取长度
    let width = Math.ceil(this.pxWidth(font));
    // 不需要处理
    if (width <= max) return this;
    // 获取省略号长度
    let ellipsis = Math.ceil("...".pxWidth(font));
    // 最大长度接受不了省略号
    if (ellipsis >= max) return this;
    // 每个字符平均长度
    let average = Math.ceil(width / this.length);
    // 容许接受多少个字符
    let adopt = Math.floor((max - ellipsis) / average);
    // 不接受
    if (adopt <= 0) return this;
    // 截取下标 
    let index = Math.floor(adopt / 2);
    if (index % 2 !== 0) index -= 1;
    // 值
    let value = `${this.substring(0, index)}...${this.substring(this.length - index)}`;
    let valueWidth = value.pxWidth(font);
    // 不需要处理
    if (valueWidth <= max) return value;

    // 长多少个字符
    let character = Math.ceil((max - valueWidth) / average);
    if (character % 2 !== 0) character += 1;
    index -= character / 2;
    return `${this.substring(0, index)}...${this.substring(this.length - index)}`;
}

这个封装可以在你想的位置(前面、中间、后面)加省略号,封装的时候改一下截取的内容和省略号的位置就行了。这就是个实现思路。

"CaptainTwo".ellipsis("400 12px Microsoft YaHei UI",60)
// 'Ca...wo'

获取字符串的宽度:

https://captaintwo.com/archives/px-width

CSS加省略号(多行限制)

直接给显示的容器加上这个样式

word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
/* 这里是超出几行省略 */
-webkit-line-clamp: 3;
overflow: hidden;
文章作者: CaptainTwo
本文链接:
版权声明: 本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 CaptainTwo
前端 HTML CSS JavaScript
喜欢就支持一下吧