Question

我有三列连续，第三列有长文本，没有任何空格。由于文本很长，我无法将文本包装在列中并在页面上获得水平滚动条。有没有办法在特殊字符tilde~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;
    }

Answer 1

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

仅使用max-width 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和breack *

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

Answer 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，因为它实际上是用于破坏单词，而且你不希望在一个例子中使用任意句子。

在列内没有空间包装的长文本

2 个答案: