テキストの改行を許可する文字を変更する CSS/HTML の方法はありますか? たとえば、テキスト「fooooooo/barrrrrrrrr」を含むテーブル データがある場合、2 行に分割されませんが、「fooooooo barrrrrrrrr」が含まれている場合は分割されます。
改行をトリガーできるものに句読点文字を追加する方法はありますか?
CSS/HTML では、テキストの改行の原因、許可、または防止を行う文字セットを変更することはできません。ただし、キャラクターの出現ごとにそのようなものに影響を与えることは可能です。つまり、一般的に「「/」の後の改行は許可されている」とは言えませんが、「/」の特定の出現の後に何らかのマークアップまたはコンテンツを挿入して、そこで改行を許可することができます。
ブラウザによって改行動作が異なることに注意してください。たとえば、Opera はスラッシュ「/」をその後の改行を許可するものとして扱います。動作はコンテキストに依存する場合もあります。ブラウザの改行で私のページを見てください。
実用的な方法を知っていて、標準化者がそれを受け入れたがらないことをあまり心配していなかった人にとっては、以前は単純だったと思います:<wbr>
タグ。これは依然として単純で実用的な方法です (例: fooooooo/<wbr>barrrrrrrrr
) が、もはや最もクロスブラウザーな方法ではありません。HTML のように記述できる幅ゼロのスペース U+200B という新しい方法は、​
最新のブラウザーではうまく機能しますが、一部の古いバージョンの IE では混乱を引き起こします (この制御文字が表示される場所に小さな四角形が表示されます)。 )。
多少冗長なコードを使用する場合は、2 つの方法を組み合わせることができます。<wbr>
コンテンツが空で、生成されたコンテンツとして幅ゼロのスペースがあるインライン要素の両方を使用します。これにより、IE 6 での問題が回避されます。これは、CSS で生成されたコンテンツをサポートしていないためです (ただし、<wbr>
マークアップは認識されます)。例:
fooooooo/<wbr><a class=wbr></a>barrrrrrrrr
CSSコードで
.wbr:after { content: "\00200B"; }
テストとデモ: jsfiddle .
cssワードラッププロパティを使用して、長い単語がコンテナの幅に応じて壊れるようにすることができます。
word-wrap: break-word;
いいえ、ただし、目に見える文字やスペースを挿入せずに、指定した位置で改行を許可する Unicode 文字 (最も注目すべきは U+200B ZERO WIDTH SPACE) があります。
特定の文字の折り返しを許可するようブラウザに指示する方法はありません。
CSS3プロパティを使用すると、任意の文字word-wrap: break-word;
で改行できるようにすることで、途中まで進めることができます。これは、テキストが含まれる要素の計算された最大幅よりも長い場合に発生します。
サーバー側で HTML 出力を動的に生成している場合は、(オプションで) ラップしたい文字の前にスペースを挿入するために正規表現の検索と置換を行うことができますが、コンテキストを知らなければ、より具体的にすることは困難です。そのことについて。
代替手段として、私は過去に次のものを使用しました:
<span style="display:block;float:left;" />
または、CSS でこれを定義することをお勧めします。
.shy { display:block; float:left; }
そして、次を使用します。
<span class="shy" />
したがって、上記を文字列のどこに配置しても、必要に応じてブレークとして機能します。
stringthathasnospaceswhatsoever<span class="shy" />willbreakjustjustatthespan.