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

AprilJ 发布于2019-08-30 14:08 / 1208人阅读

摘要：当文本溢出包含元素时，显示省略符号来代表被修剪的文本。文本不会换行，文本会在在同一行上继续，直到遇到标签为止。说明限制在一个块元素显示的文本的行数。将对象作为弹性伸缩盒子模型显示。，在多行文本的情况下，用省略号隐藏超出范围的文本。

一、文本溢出隐藏

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

二、单行文本溢出隐藏

1. 注意

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

2. 说明

overflow: hidden; 当内容溢出元素框时，内容会被修剪，并且其余内容是不可见的。

text-overflow:ellipsis; 当文本溢出包含元素时，显示省略符号来代表被修剪的文本。

white-space: nowrap; 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。

三、多行文本溢出隐藏

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

云服务器 GPU云服务器 php文本溢出省略溢出文本面试题栈面试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115795.html

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

摘要：当文本溢出包含元素时，显示省略符号来代表被修剪的文本。文本不会换行，文本会在在同一行上继续，直到遇到标签为止。说明限制在一个块元素显示的文本的行数。将对象作为弹性伸缩盒子模型显示。，在多行文本的情况下，用省略号隐藏超出范围的文本。一、文本溢出隐藏如下图所示，我们需要对溢出文本进行...显示的操作，单行多行的情况都有（具体几行得看设计的心情） showImg(https://segm...

Donald 2019-08-22 15:20 评论0 收藏0
前端面试题-文本溢出显示省略号（...）

摘要：当文本溢出包含元素时，显示省略符号来代表被修剪的文本。文本不会换行，文本会在在同一行上继续，直到遇到标签为止。说明限制在一个块元素显示的文本的行数。将对象作为弹性伸缩盒子模型显示。，在多行文本的情况下，用省略号隐藏超出范围的文本。一、文本溢出隐藏如下图所示，我们需要对溢出文本进行...显示的操作，单行多行的情况都有（具体几行得看设计的心情） showImg(https://segm...

CHENGKANG 2019-08-01 18:41 评论0 收藏0
前端面试系列--css

1.盒子模型 w3c标准: width: content ie标准: width: content+padding+border elementUi,bootstrap: box-sizing:border-box; showImg(https://segmentfault.com/img/bVbrVVS); 2.选择器优先级 !important > 行内样式 > #id > .class ...

2450184176 2019-08-23 17:11 评论0 收藏0
CSS3开发文档

摘要：站点前端开发文档原文选择器原文继承属性原文核心模块原文盒子模型原文背景图像原文清除浮动原文定位选择器并集对选择器进行分组，被分组的选择器可以分享相同的声明。用逗号将需要分组的选择器开分。站点：前端开发文档原文：CSS选择器原文：CSS继承属性原文：CSS3核心模块原文：CSS盒子模型原文：CSS背景图像原文：CSS清除浮动原文：CSS定位 CSS选择器并集：对选择器进行分组，...

gplane 2019-08-30 15:56 评论0 收藏0
精彩文章大合集- 收藏集 - 掘金

摘要：发布应用市场的平台抢红包工具红包精灵开源啦掘金红包精灵，如果喜欢，点个开源不易。作者将原素材文章进行了新内容的添加和重新排列，但是因为文章高效的代码编写技巧总结前端掘金本文总结了代码编写技巧，来提升你的和代码。收藏安卓开发中非常实用优秀的库! 有图有真相! - Android - 掘金本来是打算收藏工具类的,但转念一想,已经有这么多优秀的库了,就没必要再去重复造轮子了,便归纳工作中比...

ermaoL 2019-08-29 13:03 评论0 收藏0