Question

我想使用css：

这样打破我的字符串

输入：

this,is,a,bad,punctuaction,example.

输出：

this,is,a,bad,
punctuation,
example.

可能的？

Answer 1

如果您将每个单词包装在span元素中，则可以使用，如下例所示：

<强> HTML

<div><span>this,</span><span>is,</span><span>a,</span><span>bad,</span>
<span>punctuation,</span><span>example.</span>
</div>

<强> CSS

div {
    width: 30%;
    border: 1px solid red;
    overflow: hidden;
}
div span {
    float: left;
}

<强> Working Fiddle

否则，你需要查看javascript。

JS （示例）：

var div = document.getElementById('main');
div.innerHTML = "<span>" + div.innerHTML.split(",").join(",</span><span>") + "</span>";

<强> Working Fiddle

Answer 2

有几种方法可以允许换行，否则不允许换行，但单独使用CSS是没办法的。原因是CSS适用于元素，而不是字符。

最强大的HTML + CSS方法可能是在每个逗号之后插入以下内容（或者应该允许换行符之后的其他字符）：

<wbr><a class=wbr></a>

使用CSS设置

.wbr:after { content: "\00200B"; }

这是一个棘手的问题，请参阅l ongish explanations。

Answer 3

2018年，这可以通过CSS完成：

.dont-break-out {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

请参阅https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/以获得更完整的答案。

Answer 4

div span {
float: left;
word-wrap: break-word;
}

非字母字符的自动换行

4 个答案: