CSS 複数行テキストで省略記号表示を実装する 7 つのステップ

line-height: 1.76em;"> 複数行のテキストを合理的に切り詰めるのは簡単ではありません。通常、それを解決するためにいくつかの方法を使用します:

• overflow: hidden は余分なテキストを直接隠します

• text-overflow: ellipsis は単一行のテキスト処理にのみ適しています

• さまざまな脆弱な javascript 実装が比較的脆弱である理由は、テキストの長さが変わるたびにリフロー (再レイアウト) する必要があるためです。幅などのレイアウト情報

本来の執筆時刻は 2012.9.18 で、より意味のある日でしたが、作者は WebKit によって提供される拡張 属性 -webkit-line-clamp を無視しました。 CSS の仕様。このプロパティを使用して複数行テキストの省略記号を表示するには、他の 3 つのプロパティ (display: -webkit-box、-webkit-box-orient、text-overflow: ellipsis;) と連携する必要があります。 -webkit-line-clamp 設定ブロック 要素に含まれるテキストの行数。 -webkit-box はブロック要素のレイアウトを伸縮レイアウトに設定します。 text-overflow: ellipsis; は、ボックスを超えた部分を ellipsis で表すことを意味します

ただし、この記事で紹介する方法は、CSS 仕様のプロパティを使用し、特別な実装と組み合わせることで完成します。これは、CSS2.1 仕様を実装するブラウザと互換性があり、純粋にモバイル分野で使用されるだけでなく、従来の PC ブラウザでも実行可能であることを意味します (私がどのブラウザについて言及しているかはご存知でしょう)。

CSS は複数行テキストのオーバーフローのための省略記号表示を実装します

この実装プロセスの最も簡単な部分は テキストの切り詰め です。親が含むブロックがオーバーフローした場合、要素を右下に配置することです。親要素がオーバーフローしない場合、要素は消えて見えなくなります。この困難を避けるために、より簡単な場所から始めましょう。親を含むボックスが小さい場合、子要素を親を含むボックスの右下隅に配置します

実際、この実装は要素フローティング

の基本ルールを最大限に活用します。 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 要素を作成し、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; }

このステップでの主な関心事は、フロートされた終了要素に基づいて、セクション 1 の第 2 章の図の位置にオフセットを設定することです (つまり、以下)。 prop 要素)、この時点で、realend 要素は end 要素の上に 50px、右に 300px-100px=200px の位置にあり、この位置はボックス ラップ要素を含む親の右下隅になります。これが結果です。期待:

親要素がオーバーフローしない場合、realend 要素はその右側に表示されます

この状況は、以下のセクション 7 を参照してください。例。

3番目の最適化された位置決めモデル

2番目のセクションでは、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="realend">
  3.realend<br>position:relative</p>
</p>

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

他の属性は変化せず、効果も同じです。

4番目 prop 要素の絞り込み

現在、一番左の prop 要素の機能は、テキストがオーバーフローした場合にその直下に realend 要素を作成することです。前セクションのサンプル コードでは、直感的なデモンストレーションのために prop 要素が設定されています。幅は 100 ピクセルなので、実際の効果をより適切にシミュレートするために、prop 要素の幅を徐々に減らします。

<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 に減らし、他の属性は変更しないでください。

main 要素の場合は、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 中国語 Web サイトの他の関連記事を参照してください。