資訊專欄INFORMATION COLUMN
摘要：在網(wǎng)頁開發(fā)中，經(jīng)常會遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實影響美觀，這個時候，就需要用對其進行處理。再補充一條，比如想讓內(nèi)容在第二行的時候，超出部分隱藏這個處理方式的目前只兼容內(nèi)核的瀏覽器其他方法見解說二
在網(wǎng)頁開發(fā)中，經(jīng)常會遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實影響美觀，這個時候，就需要用css對其進行處理。
下面的方法是我在實際工作中總結(jié)出來的，給大家參考一下。
2018-9-11 by yl
這是在實際應(yīng)用中遇到的一個新的需求，就是指定文本行數(shù)，如果超出就用省略號代替
.content{ /*設(shè)置文本為多行，如果超出長度用省略號代替*/
width: 200px;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2; /*限制在一個塊元素顯示的文本的行數(shù)*/
-webkit-box-orient: vertical;
overflow: hidden;
}
（1）用省略號代替超出的部分，這個就是高度、寬度都受到限制的時候適用（是我比較喜歡的一種）
text-overflow:clip 修剪文本|ellipsis 顯示省略符號來代表被修剪的文本|string 使用給定的字符串來代表被修剪的文本。
.content {
width: 80%;
height: 40px;
padding: 5px;
**overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
white-space: nowrap; /*規(guī)定段落中的文本不進行換行*/**
}
需要將三者結(jié)合使用，達到想要的效果：
（2）超出部分換行，在單詞過長，高度不受限制時適用
word-break: normal 默認(rèn)的|break-all 在單詞內(nèi)換行|keep-all 只能在半角空格或連字符處換行;
p {
width: 160px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
**word-break: break-all;**
}
（3）由于絕對定位或者其他情況，導(dǎo)致的標(biāo)題蓋住鏈接的，可以采用flex布局
.word-secondli {
display: flex;
flex-wrap: wrap;/*換行，第一行在上*/
justify-content: space-between;/*兩端對齊，項目間隔相等*/
align-items: center;/*居中對齊*/
border-bottom: 1px solid #ccc;
}
在網(wǎng)頁開發(fā)中，經(jīng)常會碰到在一些場景
click me
這樣，標(biāo)題過長的沒地兒放下鏈接的時候，鏈接會自動換行。
以上就是我能想到的方法，如果有什么不足的地方，歡迎指教。
再補充一條，比如想讓內(nèi)容在第二行的時候，超出部分隱藏：
{
width: 100%;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-inline-box;
}
這個處理方式的目前只兼容webkit內(nèi)核的瀏覽器（其他方法見解說二）：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/112164.html
摘要：原理兩個盒子，文字內(nèi)容放于盒子，固定盒子的高度及行高，超出的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。 解說一中的方法不兼容火狐、IE瀏覽器，所以解說二會給出通用的css寫法。 原理：兩個盒子a、b，文字內(nèi)容放于盒子b，固定盒子a的高度及行高，超出a的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。showImg(https://segmentfa...
摘要：原理兩個盒子，文字內(nèi)容放于盒子，固定盒子的高度及行高，超出的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。 解說一中的方法不兼容火狐、IE瀏覽器，所以解說二會給出通用的css寫法。 原理：兩個盒子a、b，文字內(nèi)容放于盒子b，固定盒子a的高度及行高，超出a的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。showImg(https://segmentfa...
摘要：原理兩個盒子，文字內(nèi)容放于盒子，固定盒子的高度及行高，超出的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。 解說一中的方法不兼容火狐、IE瀏覽器，所以解說二會給出通用的css寫法。 原理：兩個盒子a、b，文字內(nèi)容放于盒子b，固定盒子a的高度及行高，超出a的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。showImg(https://segmentfa...
摘要：理解和的區(qū)別從易于區(qū)分和理解的角度，我引用了無雙在你真的了解和的區(qū)別嗎一文中對兩個屬性作用的解釋屬性用來標(biāo)明是否允許瀏覽器在單詞內(nèi)進行斷句，這是為了防止當(dāng)一個字符串太長而找不到它的自然斷句點時產(chǎn)生溢出現(xiàn)象。 white-space 、 word-wrap 和 word-break 是決定段落中的文本如何展示的3個css屬性，屬性說明請點擊鏈接查看參考手冊。 white-space wh...
閱讀 3724·2021-10-15 09:43
閱讀 3616·2021-09-02 15:21
閱讀 2283·2021-08-11 11:23
閱讀 3320·2019-08-30 15:54
閱讀 2025·2019-08-30 13:54
閱讀 3329·2019-08-29 18:35
閱讀 753·2019-08-29 16:58
閱讀 1858·2019-08-29 12:49
