css強(qiáng)制換行和超出隱藏實(shí)現(xiàn)單行和多行的方法
這篇文章將為大家詳細(xì)講解有關(guān)css強(qiáng)制換行和超出隱藏實(shí)現(xiàn)單行和多行的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的彭州網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
<!-- white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit; white-space:設(shè)置如何處理元素內(nèi)的空白； word-break: normal|break-all|keep-all; word-break：用來(lái)標(biāo)明怎么樣進(jìn)行單詞內(nèi)的斷句 word-wrap: normal|break-word; word-wrap:用來(lái)標(biāo)明是否允許瀏覽器在單詞內(nèi)進(jìn)行斷句，這是為了防止當(dāng)一個(gè)字符串太長(zhǎng)而找不到它的自然斷句點(diǎn)時(shí)產(chǎn)生溢出現(xiàn)象。 text-overflow:ellipsis; 讓多出的內(nèi)容以省略號(hào)...來(lái)表達(dá)。但是這個(gè)屬性主要用于IE等瀏覽器，Opera瀏覽器用-o-text-overflow:ellipsis; 而Firefox瀏覽器沒(méi)有這個(gè)功能，多出的內(nèi)容只能隱藏起來(lái)。 display:-webkit-box; //將對(duì)象作為彈性伸縮盒子模型顯示。 -webkit-box-orient:vertical; //從上到下垂直排列子元素（設(shè)置伸縮盒子的子元素排列方式） -webkit-line-clamp:2; //這個(gè)屬性不是css的規(guī)范屬性，需要組合上面兩個(gè)屬性，表示顯示的行數(shù)。 /* autoprefixer: off */ /* autoprefixer: on */解決-webkit-box-orient:vertical -->
通俗點(diǎn)的解釋：
word-break:break-all;只對(duì)英文起作用，以字母作為換行依據(jù)
word-wrap:break-word; 只對(duì)英文起作用，以單詞作為換行依據(jù)
white-space:pre-wrap; 只對(duì)中文起作用，強(qiáng)制換行
white-space:nowrap; 強(qiáng)制不換行，都起作用
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不換行，超出部分隱藏且以省略號(hào)形式出現(xiàn)（部分瀏覽器支持）
案例：案例里面有注釋，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
width: 100%;
margin: 200px 20%;
}
.indexBox1 {
width: 60%;
height: 100px;
font-size: 14px;
color: #ffffff;
display: flex;
justify-content: space-around;
}
/* 單行 */
.indexBox1 .box_text1 {
width: 100px;
height: 98px;
background: gray;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* word-break: normal;
word-wrap: none; */
}
/* 多行 */
.indexBox1 .box_text4 {
width: 100px;
height: 98px;
background: black;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
/* Firefox */
display: -moz-box;
/* autoprefixer: off */
-moz-box-orient: vertical;
/* autoprefixer: on */
/* Safari、Opera 以及 Chrome */
display: -webkit-box;
/* autoprefixer: off */
/*解決下面這個(gè)屬性不顯示*/
-webkit-box-orient: vertical;
/* autoprefixer: on */
/*解決上面這個(gè)屬性不顯示*/
/* 控制在第幾行多出的內(nèi)容省略 */
-webkit-line-clamp: 5;
}
.indexBox1 .box_text5 {
/* word-break: normal|break-all|keep-all; */
word-break: break-all;
}
.indexBox1 .box_text6 {
/* word-wrap: normal|break-word; */
word-wrap: break-word;
}
</style>
</head>
<body>
<!-- 單行 -->
<p class="indexBox1">
<p class="box_text1">
我們來(lái)自同一個(gè)世界，我們都有自己的夢(mèng)想，我們都不曾放棄 我們來(lái)自同一個(gè)世界，我們都有自己的夢(mèng)想，我們都不曾放棄 我們來(lái)自同一個(gè)世界，我們都有自己的夢(mèng)想，我們都不曾放棄
</p>
<p class="box_text1">
we are come from a world,we have us dream,wo never give up us deram;
</p>
<p class="box_text1">
we are come from a world,we have us dream,wo never give up us deram;
</p>
</p>
<!-- 多行 -->
<p class="indexBox1">
<p class="box_text4">
我們來(lái)自同一個(gè)世界，我們都有自己的夢(mèng)想，我們都不曾放棄 我們來(lái)自同一個(gè)世界，我們都有自己的夢(mèng)想，我們都不曾放棄 我們來(lái)自同一個(gè)世界，我們都有自己的夢(mèng)想，我們都不曾放棄
</p>
<p class="box_text4 box_text5">
we are come from a world,we have us dream,wo never give up us deram;
</p>
<p class="box_text4 box_text6">
we are come from a world,we have us dream,wo never give up us deram;
</p>
</p>
</body>
</html>-webkit-line-clamp用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù)。為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性。常見(jiàn)結(jié)合屬性：
display:-webkit-box;必須結(jié)合的屬性，將對(duì)象作為彈性伸縮盒子模型顯示。
-webkit-box-orient必須結(jié)合的屬性，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式。
但是為了兼容火狐瀏覽器，用css與js結(jié)合的方法來(lái)實(shí)現(xiàn)；
下面是實(shí)現(xiàn)的過(guò)程：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.content {
margin: 0 auto;
width: 400px;
line-height: 25px;
margin-top: 100px;
position: relative;
height:auto;
overflow: auto;
}
.contentHide{
height: 50px;
overflow:hidden;
}
.contentHide::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 20px;
/* background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%); */
background: linear-gradient(to right, transparent, #fff 55%);
}
</style>
<body>
<p class="content">我們來(lái)自同一個(gè)世界我們都有自己的夢(mèng)想，我們不曾放棄;我們不曾放棄;我們不曾放棄;我們不曾放棄;我們不曾放棄;我們不曾放棄</p>
<p class="content">我們來(lái)自同一個(gè)世界我們都有自己的夢(mèng)想，我們不曾放棄;我們不曾放棄</p>
<p class="content">我們來(lái)自同一個(gè)世界我們都有自己的夢(mèng)想，我們不曾放棄</p>
</body>
<script>
let ct=document.querySelectorAll(".content");
for(let i=0;i<ct.length;i++){ //通過(guò)高度判斷是否要添加超出隱藏的class名
if(ct[i].offsetHeight>50)
{
ct[i].classList.add('contentHide');
}
}
</script>
</html>關(guān)于css強(qiáng)制換行和超出隱藏實(shí)現(xiàn)單行和多行的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
分享標(biāo)題：css強(qiáng)制換行和超出隱藏實(shí)現(xiàn)單行和多行的方法
文章位置：http://www.chinadenli.net/article12/gpeedc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、ChatGPT、電子商務(wù)、手機(jī)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站策劃
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 成都外貿(mào)建站怎樣才能有效果 2015-04-01
- 深圳網(wǎng)站建設(shè)之外貿(mào)建站原則 2015-10-26
- 自助外貿(mào)建站不等于企業(yè)網(wǎng)站建設(shè) 2016-03-19
- 做外貿(mào)建站好不好?這幾個(gè)誤區(qū)要注意了 2015-04-27
- 什么是外貿(mào)建站？建站前都有哪些必須了解的？ 2015-08-19
- 外貿(mào)建站在租賃美國(guó)服務(wù)器時(shí)要注意什么? 2022-10-02
- 外貿(mào)建站零基礎(chǔ)——搭建網(wǎng)站 2022-12-22
- 外貿(mào)建站不得不說(shuō)的秘密 2015-05-07
- 外貿(mào)建站9大注意要點(diǎn) 2015-10-03
- 外貿(mào)建站和推廣如何做 2021-01-28
- 外貿(mào)建站租用香港云服務(wù)器還是美國(guó)云服務(wù)器好？ 2022-10-02
- 外貿(mào)建站之營(yíng)銷型網(wǎng)站 2016-03-26