css3 を使用してテキストを切り詰め、省略記号を追加する-CSSチュートリアル-php.cn

css3 を使用してテキストを切り詰め、省略記号を追加する

PHPz

リリース： 2017-04-02 10:28:41

オリジナル

1954 人が閲覧しました

コード表示:

overflow : hidden;
/*text-overflow: ellipsis; 有些示例里需要定义该属性，实际可省略*/
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

ログイン後にコピー

概要

-webkit-line-clamp は、サポートされていない WebKit プロパティであり、ドラフト CSS 仕様には含まれていません。

ブロック要素に表示されるテキストの行数を制限します。この効果を実現するには、他の外部 WebKit プロパティと組み合わせる必要があります。一般的に結合されるプロパティ:

display: -webkit-box; オブジェクトを柔軟なボックスモデルとして表示するには、結合する必要があります。

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

テキストオーバーフローを使用すると、複数行のテキストの場合に、範囲外のテキストを省略記号「...」で非表示にすることができます。

すべてのコード:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>css3截取字符串多行</title>
<style>
.box { 
width: 400px; 
display: -webkit-box; 
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical; overflow: hidden;
}
</style>
</head></p> <p><body>
<div class="box">
css3截取字符串多行，css3截取字符串多行，css3截取字符串多行，css3截取字符串多行，css3截取字符串多行，
</div>
</body>
</html>

ログイン後にコピー

以上がcss3 を使用してテキストを切り詰め、省略記号を追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。