[解決済み] CSSでは、要素内の各単語の後に強制的に改行することができますか?
2022-04-20 03:08:25
質問
多言語サイトを構築中で、オーナーに翻訳を手伝ってもらっています。 表示されるフレーズの中には、サイトのスタイルを維持するために改行が必要なものがあります。
残念ながら、オーナーはコンピューターに詳しくないので、もし彼が
foo<br />bar
翻訳中に何らかの形でデータを修正する可能性がある。
単語が終わるたびに壊れてしまう要素に適用するCSSの解決策は(幅を変更する以外に)ありますか?
(PHPでできることは知っていますが、CSSで同じことを達成するために、私の知らない気の利いたトリックが、おそらく日中韓の機能で存在するのではないかと思っています)
EDIT
何が起こっているのか、図解してみる。
---------------- ----------------
| Short Word | | Gargantuan |
| | | Word |
---------------- ----------------
長い単語は自動的に改行され、短い単語は改行されない。 このようにしたい。
---------------- ----------------
| Short | | Gargantuan |
| Word | | Word |
---------------- ----------------
解決方法は?
使用方法
.one-word-per-line {
word-spacing: <parent-width>;
}
.your-classname{
width: min-intrinsic;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
display: table-caption;
display: -ms-grid;
-ms-grid-columns: min-content;
}
ここで
<parent-width>
は親要素の幅(または1行に収まらない任意の大きな値)です。そうすることで、1文字の後に改行があることさえ確認できる。Chrome/FF/Opera/IE7+で動作します(IE6もword-spacingをサポートしているので、おそらくIE6でも動作します)。
関連
-
[CSSチュートリアル】CSSで2カラムレイアウトを実現するN種類のメソッド
-
[CSS3] CSS3リスト無限スクロール/回転効果
-
[CSSチュートリアル】新しいCSS:whereと:is擬似クラス関数とは?
-
[CSSチュートリアル】CSSカウンターを使った数字の並びの美化方法
-
[解決済み] 絶対位置指定された要素をdivの中央に配置するにはどうしたらよいですか?
-
[解決済み] Pythonで改行(行継続)をするにはどうしたらいいですか?
-
[解決済み] 最初の要素にクラスを指定するCSSセレクタ
-
[解決済み] CR LF、LF、CRの改行タイプの違い?
-
[解決済み] DIVで長い単語を強制的に改行するには?
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】CSSのトリッキーなグラデーションで高度な背景光アニメーションの感覚を実現
-
[CSSチュートリアル】overflow:hiddenの役割を解説(overflow hidden、clear float、外周マージンの崩れを解決する)。
-
[CSSチュートリアル]cssのbackgroundとborderタグの例 詳細
-
[CSSチュートリアル】CSSで実現するTikTokのテキストジッター効果例
-
[CSSチュートリアル】タイトルを上部に配置するスティッキーレイアウトを実現するためのCSS
-
[css3]css3アニメーションマウスが絵の上に置かれると徐々に大きくなり、マウスが絵から離れると徐々に縮む効果
-
[CSSチュートリアル]CSS気まぐれボーダーアニメーション効果
-
[CSSチュートリアル]CSS動的高さ遷移のアニメーション効果の実装の
-
[CSSチュートリアル】擬似要素で実現する中空三角矢印とXアイコンの例
-
[css3]Apple携帯電話のロック解除のためのCSS3サンプルフォントシャインエフェクト