多行文本超出后隱藏,超出3行隱藏

番茄西紅柿發布于2019-04-23 11:47 / 3581人閱讀

摘要：使用插件可實現多行文本超出后隱藏的功能地址下載后項目引入多行行上代碼無標題文檔對象遵循常規流。對象脫離常規流，使用，，，等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨著滾動。

1. 使用插件 clamp.js 可實現多行文本超出后隱藏的功能 2. git地址 https://github.com/josephschmitt/Clamp.js 下載后項目引入clamp.js 3. //多行 3行　　let demo = document.getElementById(demo) 　　$clamp(demo, {clamp: 3}) 上代碼：

DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>無標題文檔title>
    
    <script src="https://cengjingdeshuige.oss-cn-beijing.aliyuncs.com/js/clamp.js">script>
head>

<body>
<p id="demo">
 static：對象遵循常規流。top，right，bottom，left等屬性不會被應用。 relative： 對象遵循常規流，并且參照自身在常規流中的位置通過top，right，bottom，left屬性進行偏移時不影響常規流中的任何元素。 absolute：對象脫離常規流，使用top，right，bottom，left等屬性進行絕對定位，盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin折疊。fixed：對象脫離常規流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨著滾動。center：對象脫離常規流，使用top，right，bottom，left等屬性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin折疊。（CSS3）page：盒子的位置計算參照absolute。盒子在分頁媒體或者區域塊內，盒子的包含塊始終是初始包含塊，否則取決于每個absolute模式。（CSS3） sticky： 對象在常態時遵循常規流。它就像是 relative 和 fixed 的合體，當在屏幕中時按常規流排版，當卷動到屏幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。（CSS3）* CSS3新增屬性可能存在描述錯誤及變更，僅供參考，持續更新
p>
<script>
    let demo = document.getElementById(demo)
    $clamp(demo, {clamp: 3})
script>
body>
html>

GPU云服務器云服務器隱藏超出文本 html布局超出后隱藏 html多行隱藏隱藏部分行

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

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

css文本超出隱藏顯示省略號

摘要：如果實現單行文本的溢出顯示省略號同學們應該都知道用屬性來，當然還需要加寬度屬來兼容部分瀏覽。接下來重點說一說多行文本溢出顯示省略號，如下。給添加漸變背景可避免文字只顯示一半。p?style=width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;> ? ? 如果實現單行文本的溢出顯示省略號同學們應該都...

denson 2019-04-23 11:58 評論0 收藏0
css實現文本溢出隱藏

摘要：實現文本溢出顯示省略號在做響應式網頁的時候，我們要想在不同尺寸的設備下保證布局不會錯亂，就需要對文字的長度進行限定。 css實現文本溢出顯示省略號在做響應式網頁的時候，我們要想在不同尺寸的設備下保證布局不會錯亂，就需要對文字的長度進行限定。基礎設置在介紹下面的方法之前，我們先對所有的例子進行基礎的樣式設置 /*基礎設置*/ div.box{ width: 100px; ...

saucxs 2019-08-30 14:12 評論0 收藏0
css實現單行、多行文本超出顯示省略號

摘要：前言項目中我們經常遇到這種需求，需要對單行多行文本超出顯示為省略號。單行文本省略文本溢出顯示省略號文本不會換行語法默認值適用于所有元素當對象內文本溢出時不顯示省略標記，而是將溢出的部分裁切掉。前言：項目中我們經常遇到這種需求，需要對單行、多行文本超出顯示為省略號。這篇文章主要總結了小編解決此問題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

wing324 2019-08-02 12:05 評論0 收藏0
css實現單行、多行文本超出顯示省略號

摘要：前言項目中我們經常遇到這種需求，需要對單行多行文本超出顯示為省略號。單行文本省略文本溢出顯示省略號文本不會換行語法默認值適用于所有元素當對象內文本溢出時不顯示省略標記，而是將溢出的部分裁切掉。前言：項目中我們經常遇到這種需求，需要對單行、多行文本超出顯示為省略號。這篇文章主要總結了小編解決此問題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

paulquei 2019-08-29 17:20 評論0 收藏0
css實現單行、多行文本超出顯示省略號

摘要：前言項目中我們經常遇到這種需求，需要對單行多行文本超出顯示為省略號。單行文本省略文本溢出顯示省略號文本不會換行語法默認值適用于所有元素當對象內文本溢出時不顯示省略標記，而是將溢出的部分裁切掉。前言：項目中我們經常遇到這種需求，需要對單行、多行文本超出顯示為省略號。這篇文章主要總結了小編解決此問題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

maxmin 2019-08-26 13:24 評論0 收藏0