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 ブラウザでも実行可能であることを意味します (私がどのブラウザについて言及しているかはご存知でしょう)。
この実装プロセスの最も簡単な部分は テキストの切り詰め です。親が含むブロックがオーバーフローした場合、要素を右下に配置することです。親要素がオーバーフローしない場合、要素は消えて見えなくなります。この困難を避けるために、より簡単な場所から始めましょう。親を含むボックスが小さい場合、子要素を親を含むボックスの右下隅に配置します
実際、この実装は要素フローティング
の基本ルールを最大限に活用します。 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; }
<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; }
親要素がオーバーフローしない場合、realend 要素はその右側に表示されます
この状況は、以下のセクション 7 を参照してください。例。
3番目の最適化された位置決めモデル 2番目のセクションでは、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; }
<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; }
对于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元素的下方,保证在文本溢出的情况下定位准确性 :
目前,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; }
效果图和上节一样。
之前的实现中在文本未溢出的情况下,realend元素会出现在父元素的右侧,正如 。解决此问题很简单,急需要设置:
.ellipsis{ overflow:hidden; }
即可解决问题。
现在我们离结完就差一步了,即去掉各元素的背景色,并且用“...”替换文本。最后为了优化体验,采用渐变来隐藏“...”覆盖的文本,并设置了一些兼容性的属性。
到了此处,相信现在关心的只是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 サイトの他の関連記事を参照してください。