ホームページ > 記事 > ウェブフロントエンド > CSSでテキストのオーバーフロー部分に省略記号を表示するにはどうすればよいですか? (コード例)
CSSでテキストのオーバーフロー部分に省略記号を表示するにはどうすればよいですか? (コード例)
- 青灯夜游オリジナル
- 2018-09-07 15:30:5746682ブラウズ
Web フロントエンド開発を行うとき、通常、記事のタイトルを取得して 1 行ずつ表示します。ただし、タイトルが長すぎると改行が発生します。また、テキスト情報の一部を表示する場合、すべてを表示するのは煩雑になり、Web エクスペリエンスが低下します。ただし、overflow:hidden を使用すると、幅を超える文字を非表示にすることができます。しかし、結末はいつも少し硬いように思えます。また、表示されていない文字がまだあることを後でユーザーに知らせるのにも役立ちません。最善の方法は、余分な文字を省略記号に置き換えることです。
この章では、CSSを使ってテキストのオーバーフロー部分を楕円表示にする方法を詳しく紹介します。お役に立てれば幸いです。
1: 1 行のテキストがオーバーフローして省略記号が表示されます... (ほとんどの場合、省略記号はタイトルの余分な部分に表示されます...)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS如何使文本溢出部分显示省略号？单行超出</title>
<style>
*{margin: 0px;padding: 0px;}
.box{width: 300px;height: 500px;margin: 50px auto;}
.overflow{
width:220px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="box">
<p>
css 实现单行文本超出长度显示省略号
</p>
<p class="overflow">
css 实现单行文本超出长度显示省略号
</p>
</div>
</body>
</html>上記のコードのレンダリングは次のとおりです。
2: 複数行のテキストのオーバーフローは省略記号を表示します...
1. CSS 属性設定を直接使用します (-webkit カーネルのみが効果があります)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS如何使文本溢出部分显示省略号？多行超出</title>
<style>
*{margin: 0px;padding: 0px;}
.box{
width: 280px;
height: 62px;
margin: 50px auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="box">
css 实现多行文本超出长度显示省略号，css 实现多行文本超出长度显示省略号，
css 实现多行文本超出长度显示省略号
</div>
</body>
</html>上記のコードのレンダリングは次のとおりです:
その中で、ほとんどのモバイルブラウザは WebKit カーネルに基づいているため、このメソッドはモバイル端末に適しています。ブロック要素に表示されるテキストの行数。これはサポートされていない WebKit プロパティであり、CSS 仕様ドラフトには含まれていません。 -webkit-box はオブジェクトをフレキシブル ボックス モデルとして表示します。 orient は、フレキシブル ボックス オブジェクトの子要素の配置を設定または取得します。 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS如何使文本溢出部分显示省略号？多行超出</title>
<style>
*{margin: 0px;padding: 0px;}
.box{
width: 280px;
height: 62px;
margin: 50px auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{
content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
</style>
</head>
<body>
<div class="box">
<p>
css 实现多行文本超出长度显示省略号，
css 实现多行文本超出长度显示省略号，
css 实现多行文本超出长度显示省略号
</p>
</div>
</body>
</html> を使用する 上記のコードのレンダリングは次のとおりです。
このメソッドは幅広い用途に使用できますが、テキストがこの行を超えない場合には省略記号も表示されます。メソッドはjsで最適化できます。
余分なテキストが露出しないように、高さを line-height の整数倍に設定します。 p::after にグラデーションの背景を追加すると、テキストの半分だけが表示されなくなります。 ie6-7 はコンテンツを表示しないため、ie6-7 と互換性を持たせるためにタグを追加する必要があります (例: ...)。ie8 と互換性を持たせるには、次のように置き換える必要があります。 ::after と :after。
3. 絶対配置とパディングを使用する (クロスブラウザーのソリューション)
上記のコードのレンダリング:
このメソッドの原理は次のとおりです。まず、テキストを含む要素に 次に、省略記号... の位置 (パディング右) をテキストを含む要素の右側に残し、最後に絶対配置を使用して省略記号... をパディング右に配置します。右側の領域 (右下隅)。以上がCSSでテキストのオーバーフロー部分に省略記号を表示するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。