web-dev-qa-db-ja.com

テキストをHTMLで折り返す方法

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaの幅を超えるdivのようなテキスト（例えば200px）をどのように折り返すことができますか？

私はCSS、jQueryなどのようなあらゆる種類の解決策に寛容です。

htmlcssword-wrap
172
Satya Kalluri

これを試して：

div {
    width: 200px;
    Word-wrap: break-Word;
}
222
Alan Haggai Alavi

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

div {
  width: 200px;
  Word-break: break-all;
  white-space: normal;
}
52
lukaserat

あなたはそのように柔らかいハイフンを使うことができます：

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

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

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

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

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

もしそれが。

51
Kim Stebel
   div {
    // set a width
    Word-wrap: break-Word
}

'Word-wrap'ソリューションはIEおよびCSS3をサポートするブラウザでのみ機能します。

最良のクロスブラウザソリューションはあなたのサーバサイド言語（phpかなんでも）を使用して長い文字列を見つけて定期的にそれらの中に配置することです。htmlエンティティ​.

例えば.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
28
Orr Siloni

Wordにスペースが含まれていない場合（長いURLなど）、IE、Firefox、chrome、safari、およびoperaで機能する唯一のものは、次のとおりです。

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

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

8
Kyle Dearle

これは私のために働きました

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;
8
Amol

他のオプションも使用しています：

div
{
   white-space: pre-line;
}

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

6
Andrew Marais

クロスブラウザ

.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+ */
}
3
Timeless

この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
Swapnil Godambe

これを試して

div {display: inline;}
0
Michael Mulikita

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
Juraj Guniš

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
Wesson2

私はブートストラップを使用しました。私の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;
}
0
Rahul Wasnik

これを試して

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
Vladimir Salguero

私のために働くサーバー側の解決策は以下の通りです：$message = wordwrap($message, 50, "<br>", true);ここで$messageは分割されるWord/charsを含む文字列変数です。 50は任意のセグメントの最大長、"<br>"は50文字ごとに挿入するテキストです。

0
deshbanks