1

在我的网页上,我使用了 fancybox 来预览弹出窗口中的描述文本部分。文本在桌面上显示得非常好,但在弹出窗口中显示类似这样的内容。

请注意,我 为每个空间用户在每个单词后面的句子中包含的显示所获得的描述性文本。

在此处输入图像描述

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

在此处输入图像描述

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

在此处输入图像描述 在此处输入图像描述

您现在可以发现不同之处,它显然不可接受。我想有意义地打破句子而不是单词!

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

请帮我解决这个问题。

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

4

3 回答 3

0

使用自动换行:break-word;

它甚至可以在 IE 中使用。

于 2015-08-04T05:10:02.923 回答
0

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/


第一个工作正常,但确实将“谷歌搜索”分解为“googlin-g”,第二个甚至拒绝这样做。

于 2015-08-04T05:10:11.560 回答
0

注意:如果您不想修改服务器端脚本,可以改用此 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);

并将此 CSS 属性添加到您的查看divp.

white-space: pre-wrap;

它应该工作。

于 2015-08-04T06:42:57.523 回答