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