css控制字數，超出部分就顯示省略號

時候需要控制下文字數，不然就會溢出，頁面就會變樣不美觀。這時我們就可以用css控制字數，超出部分顯示省略號。可以不換行，超出部分顯示省略號，也可以可以換行，多行，超出部分顯示省略號。

1.不換行，超出部分顯示省略號

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>用css控制字數，超出部分顯示省略號</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
/*超出部分就隱藏*/
overflow:hidden;
/*不換行設定*/
white-space:nowrap;
/*超出部分的文字顯示省略號*/
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="box">用css控制字數，超出部分顯示省略號用css控制字數，超出部分顯示省略號</div>
</body>
</html>

效果圖如下：

2.可以換行，多行，超出部分顯示省略號

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>可以換行，多行，超出部分顯示省略號</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
display: -webkit-box;
-webkit-box-orient: vertical;
/*2行*/
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">1.用css控制字數，超出部分顯示省略號用css控制字數，超出部分顯示省略號</div>
<div class="box">2.用css控制字數，超出部分顯示省略號用css控制字數，超出部分顯示省略號</div>
</body>
</html>

效果圖如下：

注：此方法適用于WebKit瀏覽器及移動端。

除注明外的文章,均為來源:湯久生博客,轉載請保留本文地址！

原文地址：http://tangjiusheng.com/divcss/169.html

標簽是默認是自動換行的，因此設置好寬度之后，能夠較好的實現效果，但是最近的項目中發現，使用ajax加載數據之后，p標簽內的內容沒有換行，導致布局錯亂，于是嘗試著使用換行樣式，雖然解決了問題，但是并沒有發現本質原因，本質在于，我當時獲取的數據是一長串的數字，瀏覽器應該是對數字和英文單詞處理方式相近，不會截斷。

先給出各種方式，再具體介紹每一個屬性。

強制不換行

p { white-space:nowrap; }

自動換行

p { word-wrap:break-word; }

強制英文單詞斷行

p { word-break:break-all; }

*注意：設置強制將英文單詞斷行，需要將行內元素設置為塊級元素。

超出顯示省略號

p{text-overflow:ellipsis;overflow:hidden;}

white-space 屬性設置如何處理元素內的空白

normal 默認。空白會被瀏覽器忽略。

pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 pre 標簽。

nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 br 標簽為止。

pre-wrap 保留空白符序列，但是正常地進行換行。

pre-line 合并空白符序列，但是保留換行符。

inherit 規定應該從父元素繼承 white-space 屬性的值。

word-wrap: normal|break-word;

word-wrap 屬性用來標明是否允許瀏覽器在單詞內進行斷句，這是為了防止當一個字符串太長而找不到它的自然斷句點時產生溢出現象。

normal: 只在允許的斷字點換行(瀏覽器保持默認處理)

break-word:在長單詞或URL地址內部進行換行

word-break: normal|break-all|keep-all;

word-break 屬性用來標明怎么樣進行單詞內的斷句。

normal：使用瀏覽器默認的換行規則。

break-all:允許再單詞內換行

keep-all:只能在半角空格或連字符處換行

舉例看起區別：

<!doctype html>

<head>

<title>Document</title>

<style>

.word{background:#E4FFE9;width:250px;margin:50px auto;padding:20px;font-family:"microsoft yahei";}

/* 強制不換行 */

.nowrap{white-space:nowrap;}

/* 允許單詞內斷句，首先會嘗試挪到下一行，看看下一行的寬度夠不夠，

不夠的話就進行單詞內的斷句 */

.breakword{word-wrap: break-word;}

/* 斷句時，不會把長單詞挪到下一行，而是直接進行單詞內的斷句 */

.breakAll{word-break:break-all;}

/* 超出部分顯示省略號 */

.ellipsis{text-overflow:ellipsis;overflow:hidden;}

</style>

</head>

<body>

<p class = "nowrap">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfs</p>

<p class = "breakword">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</p>

<p class = "breakAll">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf</p>

<p class = "normal">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>

<p class = "ellipsis">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>

</div>

</body>

</html>

效果如下：

伙伴們，對于省略號呢，咱們前端攻城獅的實現方法可就是多種多樣了，那接下來呢我就給你羅列一下如果用css書寫這些特殊效果，來一起看看吧~~~

1.單行文本超出顯示省略號

效果圖：

實現代碼:

HTML部分

<h3>使用css實現單行省略號</h3>
<div class="box1">
    <a href="#" class="a1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ipsaexplicabo quos sapiente ea error, mollitia necessitatibus animi facere rem non sed velit aperiam laboriosamdebitis. Quae deleniti doloremque nisi.
    </a>
</div>

CSS部分

h3 {
    padding-left: 10px;
    }
.a1 {
    text-decoration: none;
    color: #000;
    padding-left: 20px;
    } 
.box1 {
     height: 40px;
     line-height: 40px;
     background-image: linear-gradient(white, gray);
     box-shadow: 0 0 2px 2px rgb(148, 145, 145);
     box-sizing: border-box;
     /* 單行顯示省略號 */
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     }

注:此案例為京東首頁的部分切圖，此時的省略號可以用上述代碼實現

2.多行顯示省略號

效果圖：

HTML部分

<h3>使用css實現三行之后顯示省略號</h3>
<div class="box2">
    <a href="#" class="a1">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit dicta laudantium aspernatur illo id, beatae mollitia magnam, laboriosam cupiditate harum veritatis ullam delectus adipisci quasi, laborum ipsum quis est molestiae.
    </a>
</div>

CSS部分

h3 {
    padding-left: 10px;
    }
.a1 {
    text-decoration: none;
    color: #000;
    padding-left: 20px;
    } 
.box2 {
    height: 60px;
    line-height: 30px;
    background-image: linear-gradient(white, gray);
    box-shadow: 0 0 2px 2px rgb(148, 145, 145);
    overflow: hidden;
    /* 三行顯示省略號 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    }

實際案例應用場景說明:

注:此時明顯是折行后在第二行多余的部分顯示省略號，那由于內容不固定字數不固定，所以需要動態設置，那么就應用到了上述的多行顯示省略號的方法

3.內容中間顯示省略號(方法一)

效果圖:

HTML部分

<h3>使用css實現中間顯示省略號方法一</h3>
<div class="box3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi perferendis iste sit! Et quos aspernatur suscipit ab qui? Cumque debitis fugiat ab fugit repudiandae, vel eius error nisi minus<span></span><a href="#">全文</a>
</div>

css部分

.box3 {
        /* height: 120px; */
        line-height: 30px;
        background-image: linear-gradient(white, gray);
        box-shadow: 0 0 2px 2px rgb(148, 145, 145);
       }
.box3 span::after {
        content: '......';
       }

實際案例應用場景說明:

4.內容中間顯示省略號(方法二)

效果圖：

HTML部分

<h3>使用css實現中間顯示省略號方法二</h3>
<div class="box4">
    <a href="#">
        <span class="span1" title="我是左側內容我是左側內容我是左側內容">我是左側內容我是左側內容我是左側內容</span>
        <span class="span2" title="我是右側內容我是右側內容"></span>
    </a>
</div>

css部分

.box4 {
         height: 30px;
         line-height: 30px;
         background-image: linear-gradient(white, gray);
         box-shadow: 0 0 2px 2px rgb(148, 145, 145);
        }

.box4 .span1 {
        float: left;
        width: 62%;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        }

.box4 a {
        color: #000;
        }

.box4 .span2::before {
        content: attr(title);
        width: 38%;
        float: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        direction: rtl;
        }

/* 優化兩個span中間的間距 */
.box4 {
        text-align: justify;
      }

實際案例應用場景說明:

綜上所述:以上四種方案是目前頁面中應用較多的實現省略號的方法，僅代表個人觀點，如您有更優的方法歡迎聯系我們。

在線咨詢

上一篇：HTML中的圖片區域鏈接方法詳解-零基礎自學網頁制作
下一篇：官網模板html（公司官網模板）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

css控制字數，超出部分就顯示省略號

1.單行文本超出顯示省略號

2.多行顯示省略號

3.內容中間顯示省略號(方法一)

4.內容中間顯示省略號(方法二)

您的項目需求