css 多行文字超出部分省略號 一行文字超出部分省略號

 

1.  <!-- 多行文字超出寬度部分省略號： 顯示文字行數 隱藏多余的 文本多余顯示省略號text-overflow:ellipsis)-->

 html:

<div class="con"  >

    <div id="div1" >
    1 hello world!這是我內容的超出三行省略號顯示！2hello world!這是我內容的超出三行省略號顯示！3hello world!這是我內容的超出三行省略號顯示！
    </div>

</div>

css:

    .con{  position: relative }

       /* 多行文字超出寬度部分省略號 ：   */
        #div1{
            position: absolute;   
            overflow: hidden;
            -ms-text-overflow: ellipsis;text-overflow: ellipsis;
            display: -webkit-box; /** 對象作為伸縮盒子模型顯示 **/
            -webkit-box-orient: vertical; /** 設置或檢索伸縮盒對象的子元素的排列方式 **/
            -webkit-line-clamp: 3; /** 顯示的行數 **/
            background: yellowgreen;
        }

　　

2. <!-- 一行文字超出寬度部分省略號 ： 強制不換行 隱藏多余的 文本多余顯示省略號text-overflow:ellipsis)--> 

html

<div class="con"  >
    
    <div id="div2" >
        1 hello world!這是我內容的超出一行行省略號顯示！ 2 hello world!這是我內容的超出一行行省略號顯示！
    </div>

</div>

　　css：

        .con{  position: relative }

        /*一行文字超出寬度部分省略號 ： 強制不換行 隱藏多余的 文本多余顯示省略號text-overflow:ellipsis */
        #div2{
            position: absolute;left: 0;top: 200px;
            width: 200px;   white-space:nowrap; overflow:hidden;  -ms-text-overflow: ellipsis;text-overflow: ellipsis;
            background: greenyellow;}

　　

 

 參考：http://jingyan.baidu.com/article/15622f24017061fdfdbea558.html

參考 http://blog.csdn.net/dannywj1371/article/details/8127778