css、html show long words

私はページの右側にボックスを持っており、左側に長い単語を表示する必要があります。私の問題は、長い単語がボックスの後にジャンプすることです。私は "単語の折り返し：ブレークワード"を追加します。 - 同じですが。css、html show long words

サンプルを見てください：瞬間からhttp://jsfiddle.net/2dpcA/

<style> 
.page{ 
    width: 380px; 
    height: 600px; 
    margin: 0 auto; 
    background-color: #146A01; 
    word-wrap: break-word; 
} 
.box{ 
    float: right; 
    width: 200px; 
    min-height: 200px; 
    background-color: #336699; 
} 
</style> 
</head> 
<body> 
    <div class="page"> 
     <div class="box">Some text</div> 
     Lorem ipsum<br/> 
     Lorem ipsum small text small tekst small<br/> 
     VerylongTextIsHEREVerylongTextIsHEREV    
    </div>  
</body>

出典

2012-02-28 lolalola

私はあなたが間違ったフィドルをリンクしたと思います – Dampsquid

をコンテナは、長いテキストの幅よりも大きな幅を有する可能であり、それを破ることなく、それを配置します。

.page span { 
    display: block; 
    width: 180px; 
    word-wrap: break-word; 
}

デモ：http://jsfiddle.net/s6XjW/4/

出典

2012-02-28 21:30:07 Sotiris

...とあなたはdownvoted ..なぜですか？：O – Sotiris

ありがとうございます、しかし、テキストは長い言葉をたくさんすることができ、このオプションは私に良くないです。テキストがボックスの後にある場合、彼はすべてのページ幅に表示する必要があります – lolalola

あなたのhtmlの構造では、私は別のものを考えることができません。上記と同様の別の解決策は、この例のように特定の幅を持つ 'div'内のすべてのテキストを左に入れることです。http://jsfiddle.net/s6XjW/5/ – Sotiris

使用ワードラップと組み合わせて単語ブレーク...

一つの可能な解決策は、スパンであなたの大きなテキストをラップして、次のCSSを使用することができ

.page{ 
    width: 380px; 
    height: 600px; 
    margin: 0 auto; 
    background-color: #146A01; 
    word-wrap: break-word; /* Internet Explorer 5.5-7 */ 
    word-break: break-all; /* Internet Explorer 8-9 */ 
}

このfiddleをご覧ください。

出典

2012-02-28 21:32:33

フィドルは解決策を提供します – Sotiris

ありがとうございます、あなたのコードは大きな空白を作成します – lolalola

私はそれがどのようにしていないのか分かりません....？あなたはIEでそれを見ましたか？長いテキストを指定された幅で分割します。 OPが要求したものではありませんか？ –

ページに表示されるテキストを制御できますか？

もしそうなら、長い言葉でソフトハイフンを挿入してみてください。オプションの単語区切りがどこで発生するかを示します。

aterriblylengthy&shy;longword

出典

2012-02-29 18:55:37 jim31415

答えて

関連する問題