ホームページ ウェブフロントエンド htmlチュートリアル CSS - テキストが指定された幅を超えているため非表示になり、ellipses_html/css_WEB-ITnose として表示されます。

CSS - テキストが指定された幅を超えているため非表示になり、ellipses_html/css_WEB-ITnose として表示されます。

Jun 24, 2016 am 11:54 AM

一般的なテキストの切り捨て (インラインおよびブロックに適用可能):

.text-overflow {

Display:block;/*インライン オブジェクトを追加する必要があります*/

width:25em;

word - Break:keep-all;/* 改行なし*/

white-space:nowrap;/* 改行なし*/

overflow:hidden;/* コンテンツが幅を超える場合、余分なコンテンツを非表示*/

text-overflow:ellipsis;/* オブジェクト内のテキストが overflow:hidden; と一緒に使用される必要がある場合は、省略記号 (...) を表示します。 */

}

テーブルテキストオーバーフローの定義:

範囲外のテーブルには省略記号を表示します

table{

width:25em;

table-layout:fixed;/* テーブルのみが定義されていますレイアウト アルゴリズムは固定されており、以下の td の定義は機能します。 */

}

td{

width:100%;

word-break:keep-all;/* 改行なし*/

White-space:nowrap;/* 改行なし*/

overflow: hidden;/* コンテンツが幅を超える場合は余分なコンテンツを非表示にします*/

text-overflow:ellipsis;/* オブジェクト内のテキストを一緒に使用する必要がある場合は省略記号 (...) を表示します。オーバーフロー:非表示; あり。 */

}

など:

--------------------------------- -------------------------------------------------- - ------------

省略記号をホバーしてコンテンツを表示したい場合は、タイトルにそれを書いてください~

コード:

れーれー

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

< meter>の目的は何ですか 要素?

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

< datalist>の目的は何ですか 要素?

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

< Progress>の目的は何ですか 要素?

See all articles