2

我在一行中有三列，第三列是长文本，没有任何空格。由于文本很长，我无法将文本包装在列内并在页面上获得水平滚动条。有没有办法通过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;
    }
4

2 回答 2

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/

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

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

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

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

于 2013-08-27T15:31:01.707 回答
0

您不能使用 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，因为它实际上是为了破坏单词，并且您不希望以粗暴的方式任意破坏单词。

于 2013-08-27T17:32:44.207 回答