62

我遇到了一个以前从未发生过的问题，而且似乎真的是前所未有的，有些文本没有包含在 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>

有什么帮助吗？？

4

6 回答 6

102

我发现这有助于我的话在 WooThemes Testimonial 插件中的单词中途中断。

.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>
于 2015-11-24T06:15:45.200 回答
75

那是因为那个长字符串中没有空格，所以它必须跳出它的容器。添加word-break:break-all;到您的 .title 规则以强制中断。

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

jsFiddle 示例

于 2014-05-20T15:05:31.070 回答
8

jsfiddle 中的问题是您的虚拟文本都是一个单词。如果您使用问题中给出的 lorem ipsum，则文本可以很好地换行。

如果您希望大词在单词中间被打破并环绕，请将其添加到您的 .title css 中：

word-wrap: break-word;
于 2014-05-20T15:09:14.320 回答
7

这可能会帮助一小部分仍然摸不着头脑的人。从剪贴板复制到 VSCode 的文本可能有一个不可见的硬空格字符，防止换行。用 HTML 检查器检查它

带硬空格的字符串

于 2019-11-08T00:39:02.380 回答
6

你可以添加这一行：word-break:break-all;到你的 CSS 代码

于 2014-05-20T15:06:20.600 回答
1

了解另一种选择可能会使您受益，word-wrap: break-word;

这里的不同之处在于，可以完全适合 1 行的单词会这样做，而不是仅仅因为单词开始的行上没有更多的房地产而被迫中断。

请参阅小提琴的插图http://jsfiddle.net/Jqkcp/

于 2014-05-20T15:26:39.513 回答