Htmlの長いテキストは、マーカーの幅を超えて自動的にインターセプトコードを達成するために
2022-01-16 15:39:42
我々は長いテキストを表示する場合、我々はしばしば文字をインターセプトするために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;
}
.tbconxx li,tbconxx span {
padding-left: 7px;
text-overflow: ellipsis;
overflow: hidden;
display: block;
white-space: nowrap;
width: 240px;
}
これにより、オーバーテキストを自動で隠す効果が有効になります。
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;
}
.tbconxx li,tbconxx span {
padding-left: 7px;
text-overflow: ellipsis;
overflow: hidden;
display: block;
white-space: nowrap;
width: 240px;
}
これにより、オーバーテキストを自動で隠す効果が有効になります。
関連
-
divにcontentEditable=trueを設定すると、内容をリセットした後にカーソルを配置できない。
-
ローカルフォルダから画像を読み込んで表示するHTMLサンプルコード
-
HTMLにおけるフォームのセンタリング効果
-
H5入力ボックスヒント+通常テキストボックスヒント実装方法
-
html 固定タイトル列、タイトルヘッダーテーブル固有の実装コード
-
this.parentNode.parentNode(親ノードの親ノード)とは何ですか?
-
HTMLテーブル テーブルボーダー制御の詳細
-
閲覧中のページがBaiduのスナップショットを保存しないように設定する方法
-
Web制作マスターのためのよく使われるHTMLタグの解説
-
入力タグの名前と値の違いについて
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン