10

スクリーンショット

タグ内のテキスト<p>が長すぎるとこのように表示されるのですが、CSSでこれを防ぐには? CSS プロパティを試してみましたword-break: break-all;が、Firefox と Opera はこのプロパティをサポートしていません。また、他の「通常の」単語も壊れています。そのため、白の幅に応じて、非常に長い単語のみを分割し、短い単語は分割したくありません<div>。

body {
    background-color: #ccc;
}
h2 {
    float: left;
    color: #525254;
    margin: 0px;
    font: bold 15px Arial, Helvetica, sans;
}
.post {
    background-color: #fff;
    float: left;
    clear: both;
    padding: 20px;
    width: 500px;
    border-bottom: solid 1px #ddd;
}
.post_cell {
    display: table-cell;
    vertical-align: middle;
}
.post_body {
    display: table-cell;
    width: 400px;
    opacity: 0.8;
}
.profile_img {
    border: solid 3px #ccc;
    width: 48px;
    height: 48px;
    margin: 0px 15px;
}
.post_info {
    color: #c3c3c3;
    font: normal 12px Arial, Helvetica, sans;
    margin-left: 8px;
}
a.no_style {
    color: inherit;
    text-decoration: inherit;
    font: inherit;
}
p {
    float: left;
    clear: both;
    color: #525254;
    margin: 0px;
    padding: 0px;
    line-height: 18px;
    font: normal 15px Arial, Helvetica, sans;
    word-wrap: break-word;
}
<div class="post">
    <div class="post_cell">
        <input type="checkbox" />
    </div>
    <div class="post_cell">
        <img class="profile_img" src="" height="48">
    </div>
    <div class="post_body">
        <div class="post_details">
            <h2>
                <a href="javascript:void(0)" target="_blank" class="no_style">user</a>
            </h2>
            <span class="post_info">
                <span class="passed_time">15 hours ago</span> | 
                <a href="javascript:void(0)" class="no_style">3 Comments</a>
            </span>
        </div>
<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

詳細については、こちらをご覧ください: http://jsfiddle.net/Le4zK/16/

4

6 に答える 6

20

word-wrap: break-word;代わりにこれを書くword-break: break-all;

編集 ：

多分これはdisplay:tableプロパティのバグです。私はcssにいくつかの変更を加えました：divdisplay:tableに入れてください。parent

.post{
    background-color: #fff;
    float: left;
    clear: both;
    padding: 20px;
    width: 500px;
    border-bottom: solid 1px #ddd;
    display:table;
}

cssdisplay:table-cellから削除します：.post_body

.post_body{
    width: 580px;
    opacity: 0.8;
}

この例がうまくいくかどうかを確認してください。

于 2011-09-10T09:06:37.990 に答える
4

昔、私はこの問題を解決しようとしましたが、css のみのクロスブラウザー ソリューションが見つからなかったため、&#8203;javascript を使用して長い単語にゼロ幅のスペースを挿入することになりました:

var breakableLongWord = '';
for( var i = 0; i < longWord.length; i += 10 ) {
    if( i ) breakableLongWord += String.fromCharCode( 8203 );
    breakableLongWord += longWord.substr( i, 10 );
}

私が言ったように、それはずっと前のことなので、新しいブラウザ テクノロジでより良い解決策を見つけることができるかもしれません。

于 2011-09-10T09:35:11.120 に答える
2

正しいプロパティはword-wrap: break-wordです。

normalプロパティでまたはbreak-word値を指定できますword-wrap。normalテキストがボックスの境界を拡張することを意味します。break-wordテキストが次の行に折り返されることを意味します。

word-wrapIE 5.5以降、Firefox 3.5以降、およびChromeやSafariなどのWebKitブラウザでサポートされています。

于 2011-09-10T09:11:05.783 に答える
0

この解決策を確認してください。

問題は<p>タグの長さでした。位置を相対に設定した親に基づいてパーセンテージ幅を指定すると、問題が解決するようです。また、コンテンツを別のdivでラップしました。

秘訣は、親div内にすべての長い要素を含めることです。これは、表示プロパティを変更してフローティングを使用しているため、div内の要素のコンテンツフローが正常に保たれるためです。

于 2011-09-10T10:33:33.800 に答える
0

ここjsfiddle.net/Le4zKのJSFiddleでは、あなた<p>は左に浮かんでいます。まずはこれを外します。.post_bodyの表示もありますtable-cell。これを削除します。次に、word-wrapが尊重されていることがわかります<p>が、580px では大きすぎます。

table-cell与えられた例から特に必要とされていないため、可能な限りレイアウトの使用を避けてください。

于 2011-09-10T10:18:48.377 に答える
-1

私はoverflow-x: hiddenあなたの親コンテナで使用します。

于 2011-09-10T09:40:30.660 に答える