49

以下の例では、ワードラッププロパティが正しく機能しないのはなぜですか？

http://jsfiddle.net/k5VET/739/

「consectetur」という単語の一部が最初の行自体に収まるようにするにはどうすればよいですか？各行に最大文字数を収めたい。

cssは：

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    word-wrap:break-word;
    border:2px solid; }
4

7 に答える 7

202

動作しない場合word-wrap: break-allは、次も追加してみてください。

white-space:normal;

Bootstrap3の.btnクラスで作業してください

于 2015-03-02T12:36:01.433 に答える
62

使用するword-break: break-all;

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
word-break: break-all;
    border:2px solid; }

ライブデモ

于 2012-12-11T11:33:01.350 に答える
8

さて、これは古い質問だと思いますが、どのプロパティをいつ使用するかについて、いくつかの有用な説明があるかもしれないと真剣に考えています。既存の答えを見ると、説明なしで解決策を提供していると思うので、これが私の試みです。コンテキストでは、デフォルトでは、コンテナは元の形式で単語​​を保持する必要があるため、単一の長い単語を分割しようとはしません。

そうは言っても、単語を分割する3つの主な方法には、、、、overflow-wrapがありword-breakますhypens。でも、誇大広告についてはあまり深く掘り下げません。

だから最初に。質問で使用されているようword-wrapですが、ドキュメントを読んでいると、非推奨になり、一部のブラウザは単にエイリアスをに設定することにしましたoverflow-wrap。おそらくそれを使用しない方が望ましいでしょう。

2つのプロパティの違いはドキュメントではかなり明確ですが、わかりやすくするために、overflow-wrap実際には2つの可能な値しかなく、単語がオーバーフローしたかどうかを検出します。含まれている場合、デフォルトでは単語全体が次の行に移動します。が設定されている場合break-word、単語全体をその行に配置できなかった場合にのみ単語が分割されます。

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    overflow-wrap: break-word;
    border:2px solid; }
#sp { }
<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

あなたはpneumonoulを見ることができます...それが長い単語を分離しようとした後、長い単語は次の行で必要な場所で正確に壊れます。

対照的に、今はword-break。これにはよりきめ細かいプロパティがあり、実際にはbreak-wordオプションもあります。これは上記のスニペットと同義であるため、どちらを使用するかは非常に簡単だと思います。

ただし、本来意図されていた場所に単語を合わせるために、可能な限り単語を分割word-breakする値も提供します。break-all単語を改行する必要があるかどうかを判断しようとはしません。オーバーフローした場所で改行を押し込むだけです。ここでの上記との最大の違いは、私たちが使用する長い単語が今でも一番上にあるということです。

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    word-break: break-all;
    border:2px solid; }
#sp { }
<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

そして最後に、hyphens単語を分割する独自の特別な方法があります。詳細については、ドキュメントをご覧ください。また、言語が異なれば単語を分割する方法も異なりますが、幸いなことに、hyphensプロパティは属性にフックしてlang何をすべきかを理解しています。

人々が提案した別のオプションは、スペースwhite-spaceを介してテキストを分割しようとするプロパティを使用することです。私が使用した例では、単語自体がコンテナよりも長いため、これは状況を改善しません。このCSSプロパティについて注意すべき重要なことは、これは単語をそれ自体の中で分割しようとはせず、適切な場合はいつでもスペースを介して分割しようとすることです。

#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight: normal;
    line-height: 18px;
    width: 238px;
    height:38px;
    cursor: pointer;
    white-space: normal;
    border:2px solid; }
#sp { }
<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>  
</div>

お役に立てれば。

于 2018-09-27T19:28:20.810 に答える
3

これは、テキストを1行で折り返す場合に便利です。

#fos {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
于 2016-06-20T14:57:52.227 に答える
2

ブラウザはデフォルトで自動ハイフネーション（適切な折り返しを行う方法）を適用しないため、正しく折り返されません。CSSハイフネーションまたはJavaSciptベースのハイフネーションを使用する必要があります。設定word-wrap:break-wordは、word-break: break-all定義上、適切な折り返しではなく、単語を分割します（任意のラリーポイントで単語を分割します）。

于 2013-01-07T08:54:55.370 に答える
1

cssワードラップはすべてのブラウザで機能するわけではないため、代わりにJavaScriptを使用してください。同じ結果になるはずです。

以下の関数にはJQueryが必要であり、ウィンドウのサイズが変更されるたびに実行されます。

この関数は、要素の幅が親よりも広いかどうかをチェックし、幅がある場合は、単語だけでなくすべてを壊します。子供たちが親より大きくなってほしくないですよね？

テーブルにのみ必要だったので、他の要素で必要な場合は、「table」を「#yourId」または「.yourClass」に変更してください。親divがあることを確認するか、「div」を「body」などに変更しますか？

それが他に行く場合、それはワードブレイクに変わり、それからそれが元に戻るべきかどうかをチェックします、それがたくさんのコードがある理由です..：'/

$(window).on('resize',function() {
    $('table').each(function(){
        if($(this).width() > $(this).parent('div').width()){
            $(this).css('word-break', 'break-all');
        }
        else{
            $(this).css('word-break', 'break-word');
            if($(this).width() > $(this).parent('div').width()){
                $(this).css('word-break', 'break-all');
            }
        }
     });
}).trigger('resize');

私はそれがあなたのために働くことを願っています！

于 2014-10-31T13:09:46.873 に答える
0

長い単語だけを壊すために私は使用しword-break: break-word;ました。何らかの理由で廃止されたようですが、私にとってはそれだけがうまくいきました。私が必要としているのは、長すぎて壊す必要のある言葉だけを壊すことです。

于 2020-10-12T02:55:25.387 に答える