web-dev-qa-db-ja.com

CSSで長い単語を壊す

「hellowordsometext」のような長い単語や「1234567891122」のような整数の間にスペースを入れずに使用できる状況があります。このjsを確認してください。 http://jsfiddle.net/rzq5e/6/

div幅に達した後、次の行に分割する方法はありますか。今何が起こっているか、それはth divと一緒に広がっています

<div>Solutionforentprise</div>
htmlcsslong-integerbreakwords
16
dev1234

必要なのはWord-wrap: break-Word;、このプロパティは、スペースなしの文字列をdiv内で強制的に分割します

デモ

div {
   width: 20px;
   Word-wrap: break-Word;
}
28
Mr. Alien

私はこの解決策を自分自身で見つけました。

Word-break: break-all;

operaでは機能しません。

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_Word-break

10
dev1234

あなたのdivにIDまたはクラスを与える

その後

#divid
{
width: 30px;
Word-wrap: break-Word;
}

ワードラップはIE 5.5 +、Firefox 3.5+、およびChromeおよびSafariなどのWebKitブラウザー、Opera = 10.5+。

4
Vinay Pratap Singh

DIVのサイズを修正して 'overflow：hidden'を適用し、グリッドサイズに影響を与えないようにします。

div{width: 40px;
overflow: hidden;}

テキスト全体を表示する必要がありますか？

2
Shareek Ahamed

このような

[〜＃〜] demo [〜＃〜]

[〜＃〜] css [〜＃〜]

div {
    width: 20px;
    Word-wrap:break-Word;
}
2
Falguni Panchal

他の回答には、以前のように、古いブラウザでいくつかの問題がありますChrome 32。

このコードを使用する方が良いです：

  /* These are technically the same, but use both */
  overflow-wrap: break-Word;
  Word-wrap: break-Word;

  -ms-Word-break: break-Word;
  Word-break: break-Word;

Wordの改行位置にハイフンを追加することもできます（サポートされている場合）：

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

ソース

.c1 {
   width: 200px;
   border: 1px solid;

  /* These are technically the same, but use both */
  overflow-wrap: break-Word;
  Word-wrap: break-Word;

  -ms-Word-break: break-Word;
  Word-break: break-Word;

  /* Adds a hyphen where the Word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}
<div class="c1">
For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.
</div>
0
Moradnejad