CSS 여러 줄 텍스트에 타원 표시를 구현하는 7단계

line-height: 1.76em;"> 여러 줄의 텍스트를 합리적으로 자르는 것은 쉽지 않습니다. 일반적으로 이를 해결하기 위해 여러 가지 방법을 사용합니다:

• overflow: Hidden은 초과 텍스트를 직접 숨깁니다

• text-overflow: 줄임표는 한 줄 텍스트 처리에만 적합합니다

• 각 A 상대적으로 취약한 javascript 구현이 상대적으로 취약한 이유는 너비

와 같이 텍스트 길이가 변경될 때 리플로우(릴레이아웃) 후에 레이아웃 정보를 얻어야 하기 때문입니다. .

원래 작성일이 2012년 9월 18일이라 더 의미있는 날이지만, 작성자는 WebKit에서 제공하는 확장 속성 -webkit-line-clamp 을 무시했는데, 이는 속성이 아닙니다. CSS 사양에서 이 속성을 사용하여 여러 줄 텍스트의 줄임표 표시를 구현하려면 다음 세 가지 다른 속성과 협력해야 합니다. -webkit-line-clamp 설정 블록 요소에는 텍스트 줄 수가 포함됩니다. -webkit-box는 블록 요소의 레이아웃을 텔레스코픽 레이아웃으로 설정합니다. telescopic items; text-overflow: ellipsis; 박스 밖의 부분을 타원

구현 세부 사항을 7단계로 나눕니다. 이 구현 과정에서 가장 간단한 단계는

텍스트를 자르는 것입니다

. 가장 어려운 부분은 요소가 오버플로될 때 부모를 포함하는 블록의 오른쪽 하단에 요소를 두는 것이며, 부모 요소가 오버플로되지 않으면 요소가 사라지고 보이지 않게 됩니다. 어려움을 피하기 위해 시작하겠습니다. 더 간단한 곳에서 - 상위 포함 상자가 더 작으면 하위 요소가 상위 포함 상자의 오른쪽 하단 모서리에 있는 레이아웃이 제거됩니다.

첫 번째 프라이머

사실 이 구현은 floating 요소를 완벽하게 활용합니다. CSS2.1 사양에서는 여러 가지 상황을 자세히 설명하지 않겠습니다. 이 코드의 구현은 매우 간단합니다. 이는 세 개의 하위 요소와 포함 블록의 높이와 부동 설정입니다.

<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; }

2cd 시뮬레이션 시나리오우리는 하위 요소를 생성하여 표시할 줄임표를 대체합니다. 텍스트가 오버플로되면 해당 요소가 올바른 위치에 표시됩니다. 다음 구현에서는 realend 요소를 생성하고 이전 섹션에서 끝 요소의 부동 위치를 사용하여 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; }

이 단계에서 우리의 주요 관심은 첫 번째 섹션의 2장에 있는 그림의 위치에 끝 요소가 부동할 때 부동 끝 요소를 기반으로 오프셋을 설정하는 것입니다. (즉, prop 요소에서) 이때 realend 요소는 end 요소보다 정확히 50px 위에 있고 오른쪽으로 300px-100px=200px 이 위치는 box Wrap 요소를 포함하는 상위 요소의 오른쪽 하단입니다. 우리가 기대하는 결과:

상위 요소가 오버플로되지 않으면 realend 요소가 오른쪽에 나타납니다.

이 경우 해결 방법은 매우 간단합니다. 아래 섹션 7을 참조하세요. 이는 단지 예일 뿐입니다.

3차 최적화 위치 결정 모델

두 번째 섹션에서는 끝 요소에 대한 상대 위치 지정과 realend 요소에 대한

절대 위치 지정

을 설정합니다. 그러나 우리는 이를 더 간단한 코드, 즉 상대 위치 지정을 사용하여 구현할 수 있습니다. 위치 지정 모델에 익숙한 학생은 상대적으로 위치가 지정된 요소가 여전히 텍스트 흐름을 차지하고 요소에 대해 오프셋을 설정할 수 있다는 점을 알아야 합니다. 이런 방식으로 끝 요소를 제거하고 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="realend">
  3.realend<br>position:relative</p>
</p>

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

다른 속성은 변경되지 않으며 효과도 동일합니다. 4th prop 요소 축소

현재 가장 왼쪽 prop 요소의 기능은 이전 섹션의 샘플 코드에서 텍스트가 오버플로될 때 바로 아래에 realend 요소를 만드는 것입니다. 직관적인 데모를 주문하려면 소품 요소의 너비를 100px로 설정하세요. 이제 실제 효과를 더 잘 시뮬레이션하기 위해 소품 요소의 너비를 점차 줄여보겠습니다.

<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>


.prop {
  float: left;
  width: 5px; 
  height: 200px; 
  background: #F0F; }
.main {
    float: right;
    width: 300px; 
    margin-left: -5px;
    background: #AFF; }
.realend {
    float: right; 
        position: relative;
    top: -50px; 
        left: 300px;
    width: 100px; 
        margin-left: -100px;
    padding-right: 5px;
    background: #FAA; font-size: 14px; }

prop 요소의 경우 너비를 5px로 줄이고 다른 속성은 변경하지 않습니다.

기본 요소의 경우 margin-left:5px를 설정하여 기본 요소가 왼쪽으로 이동하도록 합니다. 5px만큼 기본 요소가 너비 내에 있도록 상위 요소가 완전히 채워집니다.

对于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元素的下方，保证在文本溢出的情况下定位准确性 :

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);
}

总结之兼容性

从上文的实现细节来看，我们利用的技巧完全是CSS规范中的浮动+定位+盒模型宽度计算，唯一存在兼容性问题的在于无关痛痒的渐变实现，因此可以在大多数浏览器下进行尝试。

 

위 내용은 CSS 여러 줄 텍스트에 타원 표시를 구현하는 7단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!