ホームページ >ウェブフロントエンド >CSSチュートリアル >css3 を使用してテキストを切り詰め、省略記号を追加する
css3 を使用してテキストを切り詰め、省略記号を追加する
- PHPzオリジナル
- 2017-04-02 10:28:412009ブラウズ
コード表示:
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。