web-dev-qa-db-ja.com

div要素内で折り返されないテキスト

これまでに発生したことのない、前例のない問題が発生しています。一部のテキストがdiv内で折り返されていません。

このリンクには、私のhtmlコードのサンプルがあります：

http://jsfiddle.net/NDND2/2/

<div id="calendar_container">
   <div id="events_container">  
      <div class="event_block">
         <div class="title">
            lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem
         </div>
      </div>
   </div>
</div>

何か助け??

cssword-wraphtmltext
40
Vasileios

これは、その長い文字列にスペースがないため、コンテナから抜け出す必要があるためです。 Word-break:break-all;を.titleルールに追加して、強制的にブレークします。

#calendar_container > #events_container > .event_block > .title {
    width:400px;
    font-size:12px;
    Word-break:break-all;
}

jsFiddleの例

52
j08691

これは、WooThemes Testimonialプラグインで私の言葉がWordの途中で途切れてしまった場合に役立ちました。

.testimonials-text {
    white-space: normal;
}

ここで遊んでください http://nortronics.com.au/recomendations/

<blockquote class="testimonials-text" itemprop="reviewBody">

<a href="http://www.jacobs.com/" class="avatar-link">

<img width="100" height="100" src="http://nortronics.com.au/wp-content/uploads/2015/11/SKM-100x100.jpg" class="avatar wp-post-image" alt="SKM Sinclair Knight Merz">

</a>
<p>Tim continues to provide high-level technical applications advice and support for a very challenging IP video application. He has shown he will go the extra mile to ensure all avenues are explored to identify an innovative and practical solution.<br>Tim manages to do this with a very helpful and professional attitude which is much appreciated.
</p>
</blockquote>
63
TimmyD

次の行を追加できます：Word-break:break-all;をCSSコードに追加

6
frieder

Jsfiddleの問題は、ダミーテキストがすべて1つのWordであることです。質問で指定されたlorem ipsumを使用すると、テキストは正常に折り返されます。

大きな単語を単語の途中で分割して折り返したい場合は、これを.title cssに追加します。

Word-wrap: break-Word;
5
Matt Dalzell

別のオプションWord-wrap: break-Word;

ここでの違いは、1行に完全に収まる単語がそれを行うのに対して、Wordが始まる行に不動産がなくなったからといって強制的に中断することです。

図についてはフィドルを参照してください http://jsfiddle.net/Jqkcp/

1
SteamDev