コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML 長いテキストが tag_HTML/Xhtml_Web ページ制作の幅を超えた場合に自動的にインターセプト

HTML 長いテキストが tag_HTML/Xhtml_Web ページ制作の幅を超えた場合に自動的にインターセプト

WBOY
リリース： 2016-05-16 16:40:55
オリジナル
1350 人が閲覧しました

長いテキストを表示する場合、C# 側で文字をインターセプトする必要があることがよくありますが、長いテキストには HTML タグが付けられていることが多く、うまく読み込まないと文字化けが発生します。 (半分の HTML マークが表示されます)、より良い方法は、CSS を使用してこの機能を実装することです。
コンテンツが制限を超えた場合、span タグは連続行の折り返しを強制します

コードをコピーします
コードは次のとおりです:

white-space:nowrap;white-space:norma;display:inline-block;

自動非表示を超えて英語側を継続的に表示します (ブロック要素内にある必要があります)

コードをコピーします
コードは次のとおりです:

overflow:hidden;white-space:nowrap;

テキストの後に... を追加する場合は、 text-overflow: ellipsis;を使用できます。一般 主要なブラウザはこの属性をサポートしています

コードをコピーします
コードは次のとおりです

.tbconxx {
float: left;
width: 255px;
padding: 5px 10px;
パディング左: 7px;
テキスト - 省略記号;
表示: ブロック;
幅: 240 ピクセル; >}


以上です。制限を超えたテキストを自動的に非表示にする効果を実現できます。
関連ラベル：
インターセプト 長い文章
ソース：php.cn
前の記事：HTML_HTML/Xhtml_webpage プロダクションでテーブル TABLE または DIV コンテンツを非表示にする html Hide div CSS スタイル 次の記事：HTMLタグ一覧と使い方_HTML/Xhtml_Webページ制作
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
クエリと式は、新しい列を含むテーブル全体を形成します。新しい列は、他の条件列の値を含む式です。 編集: 式は「値」列、つま​​りカテゴリに基づいて最も低い user_id を持つ「値」列である必要があります。カテゴリ「A」の最も低い「user_id」の「value」列が 0....
から 2024-04-06 21:23:40
0
2
530
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート