css強制換行和超出隱藏實現(xiàn)單行和多行的方法

這篇文章將為大家詳細講解有關css強制換行和超出隱藏實現(xiàn)單行和多行的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網站設計制作、成都網站制作、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯(lián)網時代的彭州網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

<!--
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
white-space:設置如何處理元素內的空白；
word-break: normal|break-all|keep-all;
word-break：用來標明怎么樣進行單詞內的斷句
word-wrap: normal|break-word;
word-wrap:用來標明是否允許瀏覽器在單詞內進行斷句，這是為了防止當一個字符串太長而找不到它的自然斷句點時產生溢出現(xiàn)象。
text-overflow:ellipsis; 讓多出的內容以省略號...來表達。但是這個屬性主要用于IE等瀏覽器，Opera瀏覽器用-o-text-overflow:ellipsis; 而Firefox瀏覽器沒有這個功能，多出的內容只能隱藏起來。
display:-webkit-box; //將對象作為彈性伸縮盒子模型顯示。
-webkit-box-orient:vertical; //從上到下垂直排列子元素（設置伸縮盒子的子元素排列方式）
-webkit-line-clamp:2; //這個屬性不是css的規(guī)范屬性，需要組合上面兩個屬性，表示顯示的行數。
/* autoprefixer: off */ /* autoprefixer: on */解決-webkit-box-orient:vertical
-->

通俗點的解釋：

word-break:break-all;只對英文起作用，以字母作為換行依據
word-wrap:break-word; 只對英文起作用，以單詞作為換行依據
white-space:pre-wrap; 只對中文起作用，強制換行
white-space:nowrap; 強制不換行，都起作用
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不換行，超出部分隱藏且以省略號形式出現(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 */
            /*解決下面這個屬性不顯示*/
            -webkit-box-orient: vertical;
            /* autoprefixer: on */
            /*解決上面這個屬性不顯示*/
            /* 控制在第幾行多出的內容省略 */
            -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">
            我們來自同一個世界，我們都有自己的夢想，我們都不曾放棄 我們來自同一個世界，我們都有自己的夢想，我們都不曾放棄 我們來自同一個世界，我們都有自己的夢想，我們都不曾放棄
        </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">
            我們來自同一個世界，我們都有自己的夢想，我們都不曾放棄 我們來自同一個世界，我們都有自己的夢想，我們都不曾放棄 我們來自同一個世界，我們都有自己的夢想，我們都不曾放棄
        </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用來限制在一個塊元素顯示的文本的行數。為了實現(xiàn)該效果，它需要組合其他的WebKit屬性。常見結合屬性：
display:-webkit-box;必須結合的屬性，將對象作為彈性伸縮盒子模型顯示。
-webkit-box-orient必須結合的屬性，設置或檢索伸縮盒對象的子元素的排列方式。

但是為了兼容火狐瀏覽器，用css與js結合的方法來實現(xiàn)；

下面是實現(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>
</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">我們來自同一個世界我們都有自己的夢想，我們不曾放棄;我們不曾放棄;我們不曾放棄;我們不曾放棄;我們不曾放棄;我們不曾放棄</p>
    <p class="content">我們來自同一個世界我們都有自己的夢想，我們不曾放棄;我們不曾放棄</p>
    <p class="content">我們來自同一個世界我們都有自己的夢想，我們不曾放棄</p>
</body>
<script>
    let ct=document.querySelectorAll(".content");
    for(let i=0;i<ct.length;i++){  //通過高度判斷是否要添加超出隱藏的class名
        if(ct[i].offsetHeight>50)
        {
            ct[i].classList.add('contentHide');
        }
    }
    
</script>
</html>

關于css強制換行和超出隱藏實現(xiàn)單行和多行的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享標題：css強制換行和超出隱藏實現(xiàn)單行和多行的方法
文章位置：http://jinyejixie.com/article12/gpeedc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站收錄、ChatGPT、電子商務、手機網站建設、響應式網站、網站策劃

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

css強制換行和超出隱藏實現(xiàn)單行和多行的方法