HTMLでテキストをワードラップする方法は?


185

(たとえば)のaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa幅を超えるようなテキストをどのように折り返すことができますか?div200px

CSS、jQueryなど、あらゆる種類のソリューションを利用できます。

回答:


240

これを試して:

div {
    width: 200px;
    word-wrap: break-word;
}

1
私は間違っているのですか、それともCSS3がワードラップされているのですか?
Gab Royer、

13
これはCSS3ですが、IE5.5を含むほとんどすべての主流のブラウザーで機能します-> 9-caniuse.com/#search=word-wrap
Jon Hadley

32
ワードラップの場合:ブレークワード。動作しないワードブレイクを試してください:ブレイクオール; / *これはキラーです* /
redochka '27

@redochkaしかし、そのときword-break: break-all;に通常のテキストで使用すると、単語が途中で壊れます。これは醜いです...両方の動作を混在させることはできませんか?
pawamoy 2016年

5
重要:それはword-break: break-allありませんword-wrap: break-all。簡単に間違える
Simon_Weaver

58

ブートストラップ3では、空白が「nowrap」に設定されていないことを確認してください。

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

すごい。word-break:break-allをTwitter Bootstrap 3のパネル本体で使用してみましたが、うまくいきませんでした。ホワイトスペース:通常の追加が修正されました。
coolboyjules 2016

5
white-space: normal;うまくいく前に、私も必要でした。
radbyx 2017

56

次のようなソフトハイフンを使用できます。

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

これは次のように表示されます

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

収容ボックスが十分に大きくない場合、または

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

もしそれが。


18
しかし、どこに置くべきかをどうやって知るの­ですか?
Kostas、2011

あなたはそれを長い言葉に分けて、分割されるかもしれません。適切な辞書からその情報を自動的に取得することもできます。
Kim Stebel

4
しかし、例のような意味不明なものはどうでしょうか。変身aaaaaa...aaaaaしても大丈夫a­a­a­a­a­a­a...a­a­a­aですか?
Kostas、2011

19
まさに私が探していたもの。私はそれが必要になるまで何かをするのが恥ずかしがりであるのが好きです;-)
w00t

3
これは、ラップされる単語がoverly.long.java.package.nameまたは多くのドットを含む類似の文字列である場合に正常に機能します。その後、­を追加できます。各ドットの後。
dokaspar 2012

28
   div {
    // set a width
    word-wrap: break-word
}

' word-wrap'ソリューションはIEとサポートするブラウザでのみ機能しますCSS3

最良のクロスブラウザーソリューションは、サーバー側の言語(phpなど)を使用して長い文字列を検索し、定期的にHTMLエンティティに配置することです。​ このエンティティは、長い単語を適切に分割し、すべてのブラウザーで機能します。

例えば

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

8
「HTMLエンティティ#8203を一定間隔で内部に配置します」が、テキストをコピーしてどこかに貼り付けようとすると、途中にランダムなUnicode文字が表示されます
user102008

9

単語にスペースがない場合(長いURLなど)、IE、Firefox、chrome、safari、operaで機能するのは次の1つだけです。

div{
    width: 200px;  
    word-break: break-all;
}

これは防弾であることがわかりました。


9

これは私のために働いた

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

6

別のオプションも使用しています:

div
{
   white-space: pre-line;
}

これにより、CSS1をサポートするすべてのブラウザー(IE 8までのほとんどすべての一般的なブラウザー)ですべてのdiv要素が設定されます


<pre>折り返しが必要な要素がある場合、これは機能しword-break、機能word-wrapしません。
プルート

4

クロスブラウザ

.wrap
{
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

2

このCSSを段落に追加します。

style="width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left" 

2
text-overflow:ellipsisは次の人と同じくらい好きですが、この質問に対する正しい答えではありません。彼は、オーバーフローを切り捨てないで、ワードラップを検討しています。
Spudley、2012年

1

CSSトリックの例:

div {
    -ms-word-break: break-all;

    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

その他の例はこちら


0

私の作品のサーバー側のソリューションは、次のとおりです。$message = wordwrap($message, 50, "<br>", true);どこ$messageまで破られる単語/文字を含む文字列変数です。50は特定のセグメントの最大長で"<br>"あり、50文字ごとに挿入するテキストです。


4
このソリューションは、文字幅の50倍が必要な最大値である200pxを超える場合は機能しません。ブラウザーのズーム機能を使用するだけで、最終的には機能しなくなることがわかります
dokaspar

0

これを試して

div{
  display: block;
  display: -webkit-box;
  height: 20px;
  margin: 3px auto;
  font-size: 14px;
  line-height: 1.4;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

プロパティtext-overflow:ellipsis add ...およびline-clampは、行数を示します。


0

HTML本文で試してください:

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

CSS本体で試してください:

background-size: auto;

table-layout: fixed;


0

ブートストラップを使用しました。私のHTMLコードは次のようになります。

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

CSS

.wrap-text {
     text-align:justify;
}

ブートストラップにはtext-justifyクラスがあるので、代わりに使用できます.wrap-text
barbsan



-2

word-wrap:break-word必要な幅とともに属性を使用します。主に 、幅をパーセンテージではなくピクセルで入力します。

width: 200px;
word-wrap: break-word;

14
これは上記の答えと同じです。なぜわざわざ?
trgraglia
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.