Css 列内无空格换行的长文本

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

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

以下是示例：

演示：

仅使用最大宽度css

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

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

演示：

使用最大宽度css、jquery和空格

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

*使用最大宽度css、jquery和breack*

---

演示：

您不能在每次出现特定字符后使用CSS添加字符。但是，您可以使用JavaScript实现这一点。为简单起见，假设类

t3

可以识别相关单元，并且仅将该类分配给它们，则可以在每次出现波浪线后添加U+200B零宽度空间，如下所示：

<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>

var t=document.getElementsByTagName（'td'）；
对于（变量i=0；i

---

您应该删除

换行：break word

，因为它字面上是用来打断单词的，而且您不想让单词以常规方式任意删除。

谢谢，伙计，但是我们不能添加百分比而不是像素吗？这张桌子应该是富丽堂皇的。我试图增加最大宽度：33%；但不幸的是，它不起作用。您能检查一下吗？既然您的目标是删除~为什么不直接使用jquery呢？

<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>