列内没有空格的长文本答案

【问题标题】：Long text without space wrapping inside the column列内没有空格的长文本
【发布时间】：2013-08-30 10:53:30
【问题描述】：

我在一行中有三列，第三列是长文本，没有任何空格。由于文本很长，我无法将文本包装在列内并在页面上获得水平滚动条。有没有办法通过css在特殊字符波浪号之后添加空格？我无法通过代码添加空间，因为它是通过数据库生成的。

文本格式如下：阿富汗~阿尔巴尼亚~阿尔及利亚~安道尔~安哥拉~安提瓜~巴布达~阿根廷~亚美尼亚~澳大利亚~奥地利~阿塞拜疆~巴哈马~巴林~孟加拉国~巴巴多斯~白俄罗斯~比利时~

示例如下： http://jsfiddle.net/awaises/nupqS/1/

table{width:100%;}
td{
    vertical-align:top;
    font:normal 9pt arial;
    padding:10px;
    width:33%;
    word-wrap: break-word;
    }

【问题讨论】：

标签： css

【解决方案1】：

演示： http://jsfiddle.net/nupqS/2/

仅使用最大宽度 css

td {
vertical-align: top;
font: normal 9pt arial;
padding: 10px;
width: 33%;
max-width: 200px;
word-wrap: break-word;
}

如果你想删除 ~ 你可以像这样使用 jquery

演示： http://jsfiddle.net/nupqS/5/

使用 max-width css , jquery 和空格

var textarea = $("td.td3");
textarea.html(textarea.html().replace(new RegExp("~","g")," "));

*使用 max-width css , jquery 和 break *

演示： http://jsfiddle.net/nupqS/6/

【讨论】：

谢谢老兄，但是我们不能添加百分比而不是像素吗？这张表应该是满的。
我尝试添加 max-width:33%;但不幸的是它不起作用。你能查一下吗？
既然你的目标是删除 ~ 为什么不直接使用 jquery？

【解决方案2】：

您不能使用 CSS 在每次出现特定字符后添加一个字符。但是，您可以使用 JavaScript 来做到这一点。为简单起见，假设相关单元格可以被 t3 类识别，并且只为它们分配该类，您可以在每次出现波浪号后添加 U+200B ZERO WIDTH SPACE，如下所示：

<script>
var t = document.getElementsByTagName('td');
for(var i=0; i < t.length; i++)
  if(t[i].className === 'td3')
    t[i].innerHTML = t[i].innerHTML.replace(/~/g, '~\u200b'); 
</script>

您应该删除word-wrap: break-word，因为它实际上是为了破坏单词，并且您不希望以粗暴的方式任意破坏单词。

【讨论】：