web-dev-qa-db-ja.com

Word全体をラップせずにラップするcss Wordラップ？

長いテキストを約300ピクセルの幅に合わせる必要があります。私はこれを使用していますcss：

 div {      
      width: 300px;
      color:white;
      Word-wrap:break-Word;
      }

私の問題はWord-wrap:break-Word;にあります。言葉の途中で言葉を壊しています。しかし、必要なのは、単語をそのままにしておき、適切なときに行を壊し、単語自体をそのまま維持するのに十分なほど文書をスマートにすることです。

それは可能ですか？ Word-wrapのすべてのオプションを試しましたが、何も機能しません。段落が壊れておらず、テキストが画面の外に留まるか、単語が壊れていくつかの文字が1行にあり、他の文字が次の行にあるかのいずれかです。

編集：コードを追加して具体例を作成します。 style要素全体：

<style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular; min-height: 12.0px}

div {
    width: 300px;
    color:white;
    font-size:10px;
    Word-wrap:break-Word;
}

pre {white-space:break;}

</style>

次に、body要素で：

<body bgcolor="#1fa0e2">
<p class="p1">
<div>
<bdo dir="rtl">
<pre>
    דירת 3 חדרים ברחוב ארתור רובינשטיין בתל אביב הוצעה באחרונה למכירה ב–2.5 מיליון שקל, ובסופו של דבר נמכרה ב–2.195 מיליון בלבד - פער של 12% בין המחיר המבוקש למחיר המכירה. בירושלים, דירת 4 חדרים ברחוב צביה יצחק הוצעה למכירה ב–1.6 מיליון שקל ונמכרה ב–40% פחות - 950 אלף שקל בלבד.

</pre>
</div>
</bdo>
<span class="Apple-converted-space"> </span></p>

</body>
</html>
htmlcssword-wrap
25
Eddy

特別なことをする必要はありません。通常、テキストは単語間で分割されます。

そうでない場合は、

  1. コンテナが広すぎるか
  2. コンテナは、スペースでまったくブレークしないように明示的に設定されます。たとえば、<pre>要素、またはcss white-space:pre;またはwhite-space:nowrap;。
  3. テキストに改行なしスペース（&nbsp;）通常のスペースの代わりに。

解決策：使用する

white-space: pre-wrap;

エレメントがpreエレメントのように動作しますが、行が長すぎる場合は折り返します。参照： http://css-tricks.com/almanac/properties/w/whitespace/

32
GolezTrol

私はこれをいじっていました。ワードブレイクスタイルの設定についても言及していません。デフォルトのWordブレークルールでは、コンテナスペースの最後でWordをラップする必要がありますが、Wordはそのまま保持されません。

したがって、CSSの問題の解決策は次のようになります。

pre{
    white-space: pre-wrap;
    Word-break: keep-all; /*this stops the Word breaking*/
}

編集：私はこれをさらにいじっていましたが、私はブートストラップを使用しているため、それらのスタイリングはプリタグをたくさん混乱させているようです。 ！importantキーワードを使用して、スタイルをオーバーライドします。

28
davidjohnclarke

Wordを<span>タグでラップし、white-space: nowrapまたはdisplay: inline-blockのいずれかを追加できます。

2
JAT86

注::データが次のように読み取られないようにしてください。Word&nbsp;Word&nbsp;Wordまたはchromeが1つのWordだと思う

クレイジーに聞こえますが、当社のモバイルアプリのバグがこれを行っていたため、APIデータを確認するまで、インターネットが壊れていると思いました：p

1
Lux.Capacitor