7步驟實現CSS多行文字的省略號顯示-css教學-PHP中文網

首頁

web前端

css教學

7步驟實現CSS多行文字的省略號顯示

怪我咯

Apr 07, 2017 am 09:49 AM

line-height: 1.76em;">合理的截斷多行文字是件不容易的事情，我們通常採用幾種方法來解決：

overflow: hidden 直接隱藏多餘的文字
text-overflow: ellipsis 只適用於單行文字的處理
各種比較脆弱的javascript實現。
原文寫作時間是2012.9.18號，比較有意義的一天。利用此屬性實現多行文字的省略號顯示需要配合其他三個屬性： display: -webkit-box 、 -webkit-box-orient 、 text-overflow: ellipsis; 。的文字行數； display: -webkit-box 設定區塊元素的佈局為伸縮佈局； -webkit-box-orient 設定伸縮項的佈局方向； text-overflow: ellipsis; 則表示超出盒子的部分使用省略號表示。

我們把實作的細節分成7個步驟，在這個實作過程中最簡單的就是截斷文字，而最難的部分則是讓一個元素處在其父包含區塊溢位時的右下方，且當父元素未溢位時該元素消失不可見。佈局到父包含框的右下角。基本規則。 ##2cd 模擬場景

我們透過建立子元素來取代將要顯示的省略號，當文字溢出的情況下該元素顯示在正確的位置上。在接下來的實作中，我們創建了一個realend元素，並利用上一節end元素浮動後的位置來實現realend元素的定位。

<p class="wrap">
  <p class="prop">1.prop<br>float:left</p>
  <p class="main">2.main<br>float:right<br>Fairly short text</p>
  <p class="end">3.end<br>float:right</p>
</p>

.wrap {
  width: 400px; height: 200px;
    margin: 20px 20px 50px;
    border: 5px solid #AAA;
    line-height: 25px; 
}

.prop {
    float: left;
    width: 100px; height: 200px; 
    background: #FAF; }
.main {
    float: right;
    width: 300px; 
    background: #AFF; }
.end {
    float: right;
    width: 100px;
    background: #FFA; }

這一步驟中，我們主要關心的是realend元素的定位，基於浮動後的end元素設定偏移量，當end元素浮動到第一節第二章圖的位置時（即在prop元素的下方），此時realend元素正好處在end元素的上方50px，右側300px-100px=200px處，而該位置正是父包含框wrap元素的右下角，此時正是我們期待的結果：

若父元素並沒有溢出，那麼realend元素會出現在其右側

7步驟實現CSS多行文字的省略號顯示這種情況解決很簡單，請看下文之第七節，此處僅作實例說明。

3rd 最佳化定位模型在第二節中，我們針對end元素設定了相對定位，並對realend元素設定

絕對定位

。但是我們可以採用更簡單的程式碼來實現，也就是只使用相對定位。熟悉定位模型的同學應該知道，相對定位的元素仍然佔據文字流，同時仍可針對元素設定偏移。這樣，就可以去掉end元素，只針對realend元素設定相對定位。

<p class="wrap">
  <p class="prop">
   1.prop<br>
   float:right</p>
  <p class="main">
   2.main<br>
   float:left<br>
   Fairly short text</p>
  <p class="end">
   <p class="realend">
     4.realend<br>
     position:absolute</p>
  3.end<br>float:right
  </p>
</p>

.end {
    float: right; position: relative;
    width: 100px;
    background: #FFA; }
.realend {
    position: absolute;
    width: 100%;
    top: -50px;
    left: 300px;
    background: #FAA; font-size: 13px; }

其他的屬性不會改變，效果一樣。

4th 削窄prop元素

目前，最左邊的prop元素的作用在於讓realend元素在文字溢出時處在其正下方，在前幾節的範例程式碼中為了直覺的演示，設定prop元素的寬度為100px，那麼現在為了更好的模擬實際的效果，我們縮小逐漸縮小prop元素的寬度。 7步驟實現CSS多行文字的省略號顯示

<p class="wrap">
  <p class="prop">1.prop<br>float:right</p>
  <p class="main">2.main<br>float:left<br>Fairly short text</p>
  <p class="realend">
  3.realend<br>position:relative</p>
</p>

.realend {
    float: right; 
        position: relative;
    width: 100px; 
    top: -50px; left: 300px;
    background: #FAA; font-size: 14px; }

針對prop元素，縮小寬度為5px，其餘屬性不變；

針對main元素，設定margin-left:5px，讓main元素左移5px，這樣main元素在寬度上就完全佔滿了父元素；

对于realend元素，top、left和width的值不变。而设置 margin-left: -100px 、 padding-right: 5px 则是为了让realend元素的盒模型的最终宽度计算为5px。

BoxWidth = ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth;

由于CSS规范规定padding的值不可以为负数，因此只有设置margind-left为负值，且等于其宽度。这样做的最终目的就是保证realend元素处在prop元素的下方，保证在文本溢出的情况下定位准确性 :

7步驟實現CSS多行文字的省略號顯示

5th 继续优化：流式布局+伪元素

目前，realend元素的相关属性仍采用 px 度量，为了更好的扩展性，可以改用 % 替代。

同时，prop元素和realend元素可以采用伪元素来实现，减少额外标签的使用。

<p class="ellipsis">
  <p>2.main<br>float:left<br>Fairly short text
  </p>
</p>

/*相当于之前的prop元素*/
.ellipsis:before { 
    content: "";
    float: left;
    width: 5px; height: 200px; 
    background: #F0F; }
/*相当于之前的main元素*/
.ellipsis > *:first-child {
    float: right;
    width: 100%; 
    margin-left: -5px;
    background: #AFF; }
/*相当于之前的realend元素*/
.ellipsis:after {
    content: "realend";
    float: right; position: relative;
    top: -25px; left: 100%;
    width: 100px; margin-left: -100px;
    padding-right: 5px;
    background: #FAA; font-size: 14px; }

效果图和上节一样。

6th 隐藏

之前的实现中在文本未溢出的情况下，realend元素会出现在父元素的右侧，正如。解决此问题很简单，急需要设置：

.ellipsis{
  overflow:hidden;
}

即可解决问题。

7th 大功告成

现在我们离结完就差一步了，即去掉各元素的背景色，并且用“...”替换文本。最后为了优化体验，采用渐变来隐藏“...”覆盖的文本，并设置了一些兼容性的属性。

到了此处，相信现在关心的只是CSS的代码了：

.ellipsis {
  overflow: hidden;
  height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "\02026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;
    
    text-align: right;

  
        background-size: 100% 100%;
  /* 512x1 image, gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
  
    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

7步驟實現CSS多行文字的省略號顯示