前端面試題-文本溢出顯示省略號（...）

Donald 發布于2019-08-22 15:20 / 3496人閱讀

摘要：當文本溢出包含元素時，顯示省略符號來代表被修剪的文本。文本不會換行，文本會在在同一行上繼續，直到遇到標簽為止。說明限制在一個塊元素顯示的文本的行數。將對象作為彈性伸縮盒子模型顯示。，在多行文本的情況下，用省略號隱藏超出范圍的文本。

一、文本溢出隱藏

如下圖所示，我們需要對溢出文本進行"..."顯示的操作，單行多行的情況都有（具體幾行得看設計的心情）

二、單行文本溢出隱藏

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文本溢出省略溢出文本面試題棧面試題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93382.html

前端面試題-文本溢出顯示省略號（...）

摘要：當文本溢出包含元素時，顯示省略符號來代表被修剪的文本。文本不會換行，文本會在在同一行上繼續，直到遇到標簽為止。說明限制在一個塊元素顯示的文本的行數。將對象作為彈性伸縮盒子模型顯示。，在多行文本的情況下，用省略號隱藏超出范圍的文本。一、文本溢出隱藏如下圖所示，我們需要對溢出文本進行...顯示的操作，單行多行的情況都有（具體幾行得看設計的心情） showImg(https://segm...

AprilJ 2019-08-30 14:08 評論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