css實現文本溢出隱藏

saucxs 發布于2019-08-30 14:12 / 1438人閱讀

摘要：實現文本溢出顯示省略號在做響應式網頁的時候，我們要想在不同尺寸的設備下保證布局不會錯亂，就需要對文字的長度進行限定。

css實現文本溢出顯示省略號

在做響應式網頁的時候，我們要想在不同尺寸的設備下保證布局不會錯亂，就需要對文字的長度進行限定。

基礎設置

在介紹下面的方法之前，我們先對所有的例子進行基礎的樣式設置

/*基礎設置*/
div.box{
    width: 100px;
    height: 100px;
    border: 1px solid #ffffd;
    color: #333;
    line-height: 1.8;
    margin:30px auto;
}

設置好啦，現在我們開始表演=.=

1.單行溢出隱藏顯示...



    目錄結構清晰是首要目標，至于命名只要能達到表意的目的即可。目錄結構清晰


/*1.單行溢出隱藏顯示...(在文字的容器上設置)*/
.text-box1 p{
    white-space: nowrap;      /*超出的空白區域不換行*/
    overflow: hidden;         /*超出隱藏*/
    text-overflow: ellipsis;  /*文本超出顯示省略號*/
}

我一定要把每一步都記得清清楚楚，因為我發現不寫清楚為什么這樣設置，過段時間真的會忘了。
運行效果：

2.多行溢出隱藏顯示...



    目錄結構清晰是首要目標，至于命名只要能達到表意的目的即可。目錄結構清晰


/*2.多行溢出隱藏顯示...(在文字的容器上設置)  只兼容webkit內核的瀏覽器*/
.text-box2 p{
    display: -webkit-box;             /*將對象轉為彈性盒模型展示*/
    -webkit-box-orient: vertical;     /*設置彈性盒模型子元素的排列方式*/
    -webkit-line-clamp: 2;            /*限制文本行數*/
    overflow: hidden;                 /*超出隱藏*/
}

運行效果：

3.多行溢出隱藏顯示...



    目錄結構清晰是首要目標，至于命名只要能達到表意的目的即可。目錄結構            


/*3.多行溢出隱藏顯示...(跨瀏覽器兼容+偽元素定位)*/
.text-box3 p{
    position: relative;
    line-height: 1.4em;        /*行高和height成倍數，這里以三行文本超出隱藏舉例*/
    height: 4.2em;
    overflow: hidden;
}
.text-box3 p::after{         /*若要兼容IE8需用:after*/
    content: "...";          /*替換內容比較靈活*/
    position: absolute;
    bottom: 2px;
    right:5px;
    padding: 0 3px;
    background:#fff;         /*顏色和文字背景保持一致*/
    box-shadow: 0 0 10px #fff;  /*邊緣處理*/
}

這種方式比較靈活，但是實現的效果可能會比較生硬，所以需要對邊緣進行虛化處理。
運行效果：

意思是這個意思，或許會有更合適的方法進行處理

云服務器 GPU云服務器溢出文本 php文本溢出省略 css文本框 java實現富文本

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

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

[譯] 學習 CSS clip-path 屬性

摘要：整體來說網頁主要是由矩形所構成的，另一方面印刷品則具備相對多樣性。即便我們設定的元素不再是矩形，但周圍的元素排列方式仍然維持原本矩形的佈局。為了達成周圍的元素跟著裁切的形狀，我們可以使用屬性。周圍的元素仍需要靠來修正。整體來說網頁主要是由矩形所構成的，另一方面印刷品則具備相對多樣性。造成這樣差異的原因有很多，不過其中一個即是缺少合適的工具。這篇文章主要會介紹 clip-path 這...

yuanxin 2019-08-29 11:00 評論0 收藏0
[譯] CSS 載入機制的未來趨勢

摘要：載入流程被限制在兩個階段根據上面的模式，內嵌透過隱藏尚未套用樣式的內容，然後非同步得載入之後呈現內容。樣式表本身的載入機制是平行的，但是套用樣式卻是要照順序的。我們需要一點小技巧來避免。這週閱讀到這篇有意思的文章，於是便動手寫下簡單的翻譯，如果有理解錯誤的地方歡迎指教。 Chrome 正在試圖改變當寫在的行為，從blink-dev 的文章並不能很清楚的知道其優點。所以這篇文章...

Astrian 2019-08-30 12:47 評論0 收藏0
CSS - 純css實現多行文本溢出省略（兼容所有瀏覽器）

摘要：前言多行文本超出高度限制出現省略號移動端多為內核的有擴展屬性但并不是規范中的屬性端往往要借助去實現這一效果，但麻煩且不是很靠譜，今天就用純來實現一個完全兼容的多行省略。前言多行文本超出高度限制出現省略號 , 移動端多為webkit內核的 , 有擴展屬性-webkit-line-clamp , 但并不是CSS規范中的屬性 , PC端往往要借助js去實現這一效果，但麻煩且不是很靠譜，今...

李義 2019-08-29 12:21 評論0 收藏0
【前端芝士樹】純CSS實現多行文本溢出顯示省略號

摘要：前端芝士樹純實現多行文本溢出顯示省略號使用來控制行數由于用來限制在一個塊元素顯示的文本的行數這是一個不規范的屬性，它沒有出現在規范草案中，為了實現該效果，它需要組合其他外來的屬性。【前端芝士樹】純CSS實現多行文本溢出顯示省略號使用-webkit-line-clamp來控制行數由于-webkit-line-clamp 用來限制在一個塊元素顯示的文本的行數,這是一個不規范的屬性（u...

CNZPH 2019-08-30 15:54 評論0 收藏0
CSS實現單行、多行文本溢出顯示省略號

摘要：如果實現單行文本的溢出顯示省略號同學們應該都知道用屬性來，當然還需要加寬度屬來兼容部分瀏覽。接下來重點說一說多行文本溢出顯示省略號，如下。如果實現單行文本的溢出顯示省略號同學們應該都知道用text-overflow:ellipsis屬性來，當然還需要加寬度width屬來兼容部分瀏覽。實現方法： overflow: hidden; text-overflow:ellipsis; whit...

番茄西紅柿 2019-04-23 14:39 評論0 收藏0