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

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端面试题-文本溢出显示省略号(...)相关的知识,希望对你有一定的参考价值。

一、文本溢出隐藏

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

技术图片

二、单行文本溢出隐藏

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

以上是关于前端面试题-文本溢出显示省略号(...)的主要内容,如果未能解决你的问题,请参考以下文章

web前端入门到实战:css实现单行、多行文本超出显示省略号

CSS和JS实现文本溢出显示省略号

多行文本溢出如何显示省略号

前端工作中常用 CSS 知识点整理

实现单行或多行文本溢出显示省略号

纯css实现文本内容单行/多行溢出显示省略号