仅使用 HTML/CSS 使文本适合容器而不打断单词

Fit text in container without breaking word using HTML/CSS only

在我的网页上,我使用了 fancybox 作为弹出窗口中描述文本的预览部分。文本在桌面上显示完美,但在弹出窗口中显示如下内容。

Please note that the descriptive text I'm getting for the display it include   for each space user gives for the sentence after each word.

当我使用 word-break: break-all; 时,它会变成这样

然后我也用了 word-break:break-word; 得到了这个

你现在可以看出区别了,它打破了单词,显然是不可接受的。我想有意义地打断句子而不是单词!

问题是我只能在这里使用 HTML/CSS 来解决这个问题,在这里看了很多 que/ans 但没有运气。

请帮我解决这个问题。

我已经创建了一个 JSFiddle 请查看这可能有助于清楚地理解。

使用word-wrap:break-word;

它甚至可以在 IE 中运行。

css"word-break"属性有很多可能的值。

http://www.w3schools.com/cssref/css3_pr_word-break.asp

word-break:break-word;

https://jsfiddle.net/1acbtr82

word-break:keep-all;

https://jsfiddle.net/dabros/1acbtr82/1/


第一个工作正常但确实将 "googling" 分解为 "googlin-g",第二个甚至拒绝这样做。

注意:如果您不想修改服务器端脚本,可以改用此JavaScript解决方案。我不认为你可以只使用 CSS 而不对你的服务器端代码做任何修改来删除这些 &nbps;.

在这种情况下,您应该首先使用以下 JavaScript 代码将 HTML 特殊字符解码为简单文本。

var text = $("<textarea/>").html('your HTML encoded text here with &nbsp; and all').text();
$('your viewing div/p selector').html(text);

并在您的查看 divp 中添加此 CSS 属性。

white-space: pre-wrap;

应该可以。