折りたたまないが、HTMLでまだ(行)ブレーク可能なスペースですか?

StackOverflow https://stackoverflow.com/questions/605360

  •  03-07-2019
  •  | 
  •  

質問

3つのスペースのように見える行の途中に空白を入れたいが、行が長くなりすぎると壊れる可能性がある場合、HTMLで何を使用できますか?

通常の空白は折りたたまれ(スペースの実行は単一のスペースと同じように見えます)、改行しないスペース(<!> amp; nbsp)では行を分割できません。

更新:本当に欲しいのは<!>#65308; pre <!>#65310;長い行を分割できるタグ(ソースコードを表示する必要があります)。

役に立ちましたか?

解決

1つ以上のemスペース(<!> amp; emsp;)はどうですか?確かに、これはユーザーのフォントサイズによって異なります。デザインでそれが実際に機能しない場合は、エンスペース(<!> amp; ensp;)を検討してください。

さまざまなスペースのこのテーブルもご覧くださいウィキペディア。

他のヒント

実際に正確な答えがあります<!>#8217;探しています。私はこの答えをどこでも検索しましたが、誰も完璧に機能することを提案しませんでした。だから、私は解決策を考え出し、それを試してみましたが、それは何の欠陥もなく動作することを床に落としました!

Garrow は実際に正しかった(彼は<!>#8217; tを説明したり、完全に理解しなかった) )。解決策は、&nbsp;を単独で配置する代わりに、&nbsp;<wbr>を配置することです。単純な検索を行い、すべての<wbr>の後に<=>タグを置き換えて追加するだけです。完璧に動作します!

<=>タグはすべての主要なブラウザでサポートされているあまり知られていないタグで、必要な場合にのみ改行をここに挿入するようブラウザに指示します。

更新:これが機能しないブラウザーが1つ見つかりました<!>#8217; tが正しく動作しません<!>#8211; IE 8!彼らは実際に<=>タグを取り出しました!次のようなクラスを作成して、この問題を解決しました。

.wbr:before { content: "\200B" }

そして<=>を<=>で置き換える代わりに、次で置き換えます:

&nbsp;<wbr><span class='wbr'></span>

PHPでは、これは次のようになります。

$text = str_replace(" ","&nbsp;<wbr><span class='wbr'></span>", $text);

Don <!>#8217;クラスを追加することも忘れないでください。

明らかに、これはかなり過度になっており、単一のスペースをすべてのスペースで置き換えていますが、希望どおりに機能します。

これが面倒な場合、別の解決策は、ダブルスペースを<=>の後に通常のスペースが続くように交換することです。これにより、<=>と通常のスペースが交互になり、テストで機能します。

PHPでは、これは次のようになります。

$text = str_replace("  ","&nbsp; ", $text);

これがお役に立てば幸いです!私はこれについて十分な研究を行った。渡すべきだと思った。

2つの改行しないスペースの間のスペースは機能しませんか?

<!> amp; nbsp; <!> amp; nbsp;

IEをターゲットにしない(8、標準モードを除く)の場合:

<span style="white-space: pre-wrap">   </span>

IEの場合、<span style="width:3ex"></span>は互換モードで動作するため、それらをマージして...

<span style="width:3ex;white-space:pre-wrap">   </span>

IE7標準を除いて、私が試したどこでも動作するようです。 D'oh!

通常のスペースが続く2つの&nbsp;はどうですか?それに対する唯一の欠点は(私が知る限り)、改行が通常のスペースで自然に落ちる場合、非改行スペースのために前の行に少し後ろのスペースがあることですが、私はそうしませんそれがページの実際の外観に違いをもたらすとは思わない。

一歩下がって、レンダリングしようとしているものを尋ねる方が良いかもしれません。この余分なスペースは何を意味しますか?

テキスト間の左スペースに100pxを与えます  スペースの例

span style = <!> quot; margin-left:100px; <!> quot;

(n_n)

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top