ウェブフロントエンド
CSSチュートリアル
ページ上のテキストが多すぎる場合、CSS を使用して余分な部分を省略記号で表示するにはどうすればよいですか? (単一行/複数行のコードのデモ)
ページ上のテキストが多すぎる場合、CSS を使用して余分な部分を省略記号で表示するにはどうすればよいですか? (単一行/複数行のコードのデモ)
ページ上のテキストが長すぎると、ユーザーの視覚体験に悪影響を与えるだけでなく、ウェブサイトの最適化にも悪影響を及ぼします。では、CSSを使用して拡張部分に省略記号を代わりに表示するにはどうすればよいでしょうか?この記事では、cssの余分な部分に省略記号を表示する方法を詳しく紹介します。困っている人たちの役に立てば幸いです!
CSSの余分な部分に省略記号を表示する具体的なサンプルコードは以下の通りです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css超出部分省略显示测试</title>
<style>
.app {
width: 400px;
height: 28px;
line-height: 28px;
margin: 50px 0 0 50px;
border: 1px solid red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="app">
<span class="content">php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线修改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。</span>
</div>
</body>
</html>効果は以下の通りです:
注: 上記は、aで省略記号のオーバーフロー表示を実現するためのものです。 text-overflow:ellipsis 属性を使用した 1 行のテキストで、幅を増やす必要がある width 属性は、部分的なブラウジングに対応するために使用されます。
それでは、単一回線の操作方法がわかれば、複数回線の操作も簡単になります。複数行の実装方法は主に以下のコードです:
display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
cssは省略部分の互換範囲外です:
WebKitのCSS拡張属性を使用しているため、この方法はWebKitブラウザやモバイル端末に適しています
。注:
-webkit -line-clamp は、ブロック要素に表示されるテキストの行数を制限するために使用されます。この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります。一般的に結合される属性:
display: -webkit-box; オブジェクトをフレキシブル ボックス モデルとして表示するために結合する必要がある属性。
-webkit-box-orient は、フレックス ボックス オブジェクトの子要素の配置を設定または取得する属性と組み合わせる必要があります。
以上がページ上のテキストが多すぎる場合、CSS を使用して余分な部分を省略記号で表示するにはどうすればよいですか? (単一行/複数行のコードのデモ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7490
15
1377
52
77
11
19
41
GraphQLキャッシングの使用
Mar 19, 2025 am 09:36 AM
最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または
最初のカスタムSvelteトランジションを作成します
Mar 15, 2025 am 11:08 AM
Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。
Redwood.jsと動物相を使用してイーサリアムアプリを構築します
Mar 28, 2025 am 09:18 AM
最近のビットコインの価格が20k $ $ USDを超えており、最近30Kを破ったので、イーサリアムを作成するために深く掘り下げる価値があると思いました
ショー、Don＆＃039; t Tell
Mar 16, 2025 am 11:49 AM
あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか？新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか
CSSを使用して、テキストシャドウやグラデーションなどのテキスト効果を作成しますか？
Mar 14, 2025 am 11:10 AM
この記事では、影やグラデーションなどのテキスト効果にCSSを使用し、パフォーマンスのために最適化し、ユーザーエクスペリエンスの向上について説明します。また、初心者向けのリソースもリストしています。（159文字）
Eleventyで独自のBragdocを作成します
Mar 18, 2025 am 11:23 AM
開発者としての段階に関係なく、私たちが完了したタスクは、大小を問わず、個人的および専門的な成長に大きな影響を与えます。
NPMコマンドは何ですか？
Mar 15, 2025 am 11:36 AM
NPMコマンドは、サーバーの開始やコンパイルコードなどの1回限りのプロセスまたは継続的に実行されるプロセスとして、さまざまなタスクを実行します。
