css3テキストオーバーフロー表示 control_html/css_WEB-ITnose

1. 単一行テキストのオーバーフローには省略記号 (...) が表示されます。

要素をブロックレベルの要素に設定します。display:block、要素の幅 width を設定、overflow: hidden を設定します。テキスト オーバーフローの表示ステータスを設定します。 text-overflow :ellipsis; 空白がコンテナ境界で折り返されるが、nowrap は折り返されないかどうか。

{    display:block;    width:200px;    overflow:hidden;    text-overflow:ellipsis;    -o-text-overflow:ellipsis;      -webkit-text-overflow:ellipsis;      -moz-text-overflow:ellipsis;      white-space:nowrap; }

2. 複数行のテキストがオーバーフローし、最後の行に省略記号 (…) が表示されます。

このページは、Webki ブラウザーまたはモバイル端末 (Webkit を備えたほとんどのブラウザー) で直接使用できます。 core) Webkit の CSS 拡張属性 (Webkit はプライベート属性) -webkit-line-clamp。

-webkit-line-clamp は、ブロック要素に表示されるテキストの行数を制限するために使用されます。

共通の組み合わせ属性:

display:-webkit-box; オブジェクトをフレキシブル ボックス モデルとして表示するには、これらを組み合わせる必要があります。

-webkit-box-orient を属性と組み合わせて、フレックス ボックス オブジェクトの子要素の配置を設定または縮小する必要があります。

text-overflow: ellipsis; 複数行のテキストの場合、省略記号「...」を使用して範囲を超えるテキストを非表示にすることができます。

{    width:200px;      word-break:break-all;      display:-webkit-box;      -webkit-line-clamp:3;      -webkit-box-orient:vertical;      overflow:hidden;}

3. ブラウザ間の互換性ソリューション

{    width:200px;    height:60px;    line-height:20px;    position:relative;    overflow:hidden;    &:after{        content: "...";        position: absolute;        bottom: 0;        right: 0;        padding: 0 20px 1px 5px;        background: #ffffff;    }}

注 : 上記書き込みはlessの構文です。