CSSを使用して長いテキスト行(スペースなし)を親コンテナの静的幅に従って強制的に改行する [重複]。
2023-09-16 12:41:04
質問
重複の可能性があります。
CSS: 長い文字列 (空白なし) を強制的に XUL および/または HTML でラップするには
次のようなコードがあるとします。
<div style="width:100px;height:1000px">This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces</div>
申し訳ありませんが、スタックオーバーフローは(プレビューによると)コードスニペットを改行しません。
ほとんどの(?)状況で、次のようにすると、長い行のテキストを保持するコンテナが、中に含まれるテキストの幅いっぱいに伸びるようになります。
これを、親コンテナの css 指定幅 (width:100px) に従って強制的に改行 (単語の途中でも) したいのです。
これは私の知らないcssタグで可能なのでしょうか?
IE6+の比較対象、さらにgecko/webkit/operaをお願いします。
どのように解決するのですか?
これを利用して、.NET Frameworkをラップすることができます。
.wrap {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
関連
-
[CSSチュートリアル】検索ボックスの非表示機能を実現するCSS(アニメーションの順送り・逆戻りシーケンス)
-
[CSSチュートリアル】CSSのシングルDivの描画スキル
-
[解決済み] テーブルセルでCSSテキストオーバーフロー?
-
[解決済み] How to line-break from css, without using <br />?
-
[解決済み] div 内で画像を水平方向にセンタリングする
-
[解決済み] ハイフンの後に改行しない
-
[解決済み] 純粋なCSSで動的な文字量に応じたフォントサイズをレスポンシブにする
-
[解決済み】コンテナの残りの幅を埋めるスタイル入力要素
-
[解決済み】display:flexを使って残りの縦幅をCSSで埋める。
-
[解決済み] 固定幅のスパンで長いテキストや単語を折り返すには?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[css3]CSS3タブアニメーションの背景切り替えの動的効果例
-
[CSSチュートリアル】検索ボックスの非表示機能を実現するCSS(アニメーションの順送り・逆戻りシーケンス)
-
[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め
-
[css3]css3は、背景画像の色を変更するためのさまざまな方法を実現するために
-
[CSSチュートリアル]CSS動的高さ遷移のアニメーション効果の実装の
-
[CSSチュートリアル】空間均等性の問題を解決する2つの方法
-
[CSSチュートリアル】CSSプロパティ*-gradientの有用性を探る
-
[ブラウザ互換性チュートリアル]IE9でのネイティブページの互換性問題の解決方法について
-
[解決済み] DIVで長い単語を強制的に改行するには?
-
[解決済み】空白のない長い文字列を強制的に折り返すにはどうしたらいいですか?