web-dev-qa-db-ja.com

CSS3でワードラップが正しく機能しないのはなぜですか？

以下の例で、Wordの折り返しプロパティが正しく機能しないのはなぜですか？

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

Wordの「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; }
htmlcssstringword-wrap
42
user930514

つかいます 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; }

LIVE DEMO

57
Sowmya

Word-wrap: break-all動作しない、これも追加してみてください：

white-space:normal;

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

158
Jason Leung

ブラウザは自動ハイフネーション（proper wrappingを引き起こす方法）をデフォルトで適用しないため、適切にラップしません。 CSSハイフネーションまたはJavaSciptベースのハイフネーションを使用する必要があります。設定 Word-wrap:break-Word、 と同様 Word-break: break-all、定義によりbreaks words（任意のポアtsでemを部分sに分割）、適切なラッピングの代わりに。

2
Jukka K. Korpela

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

#fos {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
    width: 100%;
}
1
Manolo

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

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

この関数は、要素の幅が親の幅よりも大きいかどうかをチェックします。幅がある場合は、単語のみではなくすべてを区切ります。私たちは子供たちが両親より大きく成長することを望まないのですか？

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

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

$(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');

私はそれがあなたのために働くことを望みます！

1
SebHallin

さて、これは古い質問であることは知っていますが、どのプロパティをいつ使用するかについて、いくつかの有用な説明があるかもしれないと真剣に考えています。既存の回答を見ると、説明のないソリューションを提供していると思うので、それを支援するための私の試みを次に示します。コンテキストの場合、デフォルトでは、コンテナはWordを元の形式で保持するため、1つの長いWordを分割しようとしません。

そうは言っても、wordsを分解する3つの主な方法は overflow-wrap 、 Word-break 、および hypens 。しかし、誇大広告に深く入り込むことはしません。

まず最初に。 私はWord-wrapは質問で使用されていますが、ドキュメントを読んでいます。これは非推奨であり、一部のブラウザは単にそれをoverflow-wrap。おそらくそれを使用しない方が好ましいでしょう。

2つのプロパティの違いはドキュメントではかなり明確ですが、明確にするためにoverflow-wrapは実際には2つの可能な値のみを持ち、Wordがオーバーフローしたかどうかを検出します。存在する場合、デフォルトでは、Word全体を次の行に移動します。 break-Wordが設定されている場合、Word全体をその行に配置できない場合にのみ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は、長いWordを分離しようとした後、次の行で必要な場所で正確に壊れます。

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

しかしながら、 Word-breakは、break-all値は、Wordが本来意図された場所に収まるように、可能な限りWordを中断します。 Wordを新しい行に配置する必要があるかどうかを判断しようとはしません。オーバーフローした箇所に改行を押し込むだけです。ここでの上記との最大の違いは、使用する長い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;
    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には、単語を分割する独自の特別な方法があります。詳細については、 documentation をご覧ください。また、言語によって単語の分割方法が異なりますが、幸いなことにhyphensプロパティはlang属性にフックし、何をすべきかを理解しています。

人々が示唆している別のオプションは、 white-spacespacesを介してテキストを分割しようとするプロパティ。私が使用した例では、Word自体がコンテナよりも長いため、これは状況を改善しません。この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>

お役に立てれば。

1
aug