前端面试题-文本溢出显示省略号（...）

Posted 2020-11-26 homehtml

一、文本溢出隐藏

如下图所示，我们需要对溢出文本进行"..."显示的操作，单行多行的情况都有（具体几行得看设计的心情）

二、单行文本溢出隐藏

<style type="text/css">
        .text {
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
</style>

1. 注意

以上设置是单行文本溢出隐藏的3个必须CSS属性，缺一不可。

2. 说明

• overflow: hidden; 当内容溢出元素框时，内容会被修剪，并且其余内容是不可见的。
• text-overflow:ellipsis; 当文本溢出包含元素时，显示省略符号来代表被修剪的文本。
• white-space: nowrap; 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

三、多行文本溢出隐藏

<style type="text/css">
        .text {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }
</style>

1. 注意

• 在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp
• webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

2. 说明

• -webkit-line-clamp 限制在一个块元素显示的文本的行数。
• display: -webkit-box; 将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow，在多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

四、javascript 方法

利用JS插件来实现该功能，这里推荐两个插件

1. Clamp.js

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

2. jQuery.dotdotdot

$(document).ready(function() {
    $("#wrapper").dotdotdot({
        //    configuration goes here
    });
});