国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端面試題-文本溢出顯示省略號(hào)（...）

AprilJ / 1209人閱讀

摘要：當(dāng)文本溢出包含元素時(shí)，顯示省略符號(hào)來(lái)代表被修剪的文本。文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到標(biāo)簽為止。說(shuō)明限制在一個(gè)塊元素顯示的文本的行數(shù)。將對(duì)象作為彈性伸縮盒子模型顯示。，在多行文本的情況下，用省略號(hào)隱藏超出范圍的文本。

一、文本溢出隱藏

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

二、單行文本溢出隱藏

1. 注意

以上設(shè)置是單行文本溢出隱藏的3個(gè)必須CSS屬性，缺一不可。

2. 說(shuō)明

overflow: hidden; 當(dāng)內(nèi)容溢出元素框時(shí)，內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。

text-overflow:ellipsis; 當(dāng)文本溢出包含元素時(shí)，顯示省略符號(hào)來(lái)代表被修剪的文本。

white-space: nowrap; 文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到
標(biāo)簽為止。

三、多行文本溢出隱藏

1. 注意

在WebKit瀏覽器或移動(dòng)端（絕大部分是WebKit內(nèi)核的瀏覽器）的頁(yè)面實(shí)現(xiàn)比較簡(jiǎn)單，可以直接使用WebKit的CSS擴(kuò)展屬性(WebKit是私有屬性)-webkit-line-clamp

webkit-line-clamp 是一個(gè) 不規(guī)范的屬性（unsupported WebKit property），它沒(méi)有出現(xiàn)在 CSS 規(guī)范草案中。

2. 說(shuō)明

-webkit-line-clamp 限制在一個(gè)塊元素顯示的文本的行數(shù)。

display: -webkit-box; 將對(duì)象作為彈性伸縮盒子模型顯示 。

-webkit-box-orient 設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 。

text-overflow，在多行文本的情況下，用省略號(hào)“...”隱藏超出范圍的文本 。

四、JavaScript 方法

利用JS插件來(lái)實(shí)現(xiàn)該功能，這里推薦兩個(gè)插件

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115795.html

相關(guān)文章

  • 前端面試題-文本溢出顯示省略號(hào)（...）

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

    Donald 評(píng)論0 收藏0

  • 前端面試題-文本溢出顯示省略號(hào)（...）

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

    CHENGKANG 評(píng)論0 收藏0

  • 前端面試系列--css

    1.盒子模型 w3c標(biāo)準(zhǔn): width: content ie標(biāo)準(zhǔn): width: content+padding+border elementUi,bootstrap: box-sizing:border-box; showImg(https://segmentfault.com/img/bVbrVVS); 2.選擇器優(yōu)先級(jí) !important > 行內(nèi)樣式 > #id > .class ...

    2450184176 評(píng)論0 收藏0

  • CSS3開(kāi)發(fā)文檔

    摘要：站點(diǎn)前端開(kāi)發(fā)文檔原文選擇器原文繼承屬性原文核心模塊原文盒子模型原文背景圖像原文清除浮動(dòng)原文定位選擇器并集對(duì)選擇器進(jìn)行分組，被分組的選擇器可以分享相同的聲明。用逗號(hào)將需要分組的選擇器開(kāi)分。 站點(diǎn)：前端開(kāi)發(fā)文檔原文：CSS選擇器原文：CSS繼承屬性原文：CSS3核心模塊原文：CSS盒子模型原文：CSS背景圖像原文：CSS清除浮動(dòng)原文：CSS定位 CSS選擇器 并集：對(duì)選擇器進(jìn)行分組，...

    gplane 評(píng)論0 收藏0

  • 精彩文章大合集- 收藏集 - 掘金

    摘要：發(fā)布應(yīng)用市場(chǎng)的平臺(tái)搶紅包工具紅包精靈開(kāi)源啦掘金紅包精靈，如果喜歡，點(diǎn)個(gè)開(kāi)源不易。作者將原素材文章進(jìn)行了新內(nèi)容的添加和重新排列，但是因?yàn)槲恼赂咝У拇a編寫(xiě)技巧總結(jié)前端掘金本文總結(jié)了代碼編寫(xiě)技巧，來(lái)提升你的和代碼。 收藏安卓開(kāi)發(fā)中非常實(shí)用優(yōu)秀的庫(kù)! 有圖有真相! - Android - 掘金本來(lái)是打算收藏工具類的,但轉(zhuǎn)念一想,已經(jīng)有這么多優(yōu)秀的庫(kù)了,就沒(méi)必要再去重復(fù)造輪子了,便歸納工作中比...

    ermaoL 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<