所有元素的CSS换行

Question

我们的一个QA人员发现了一个bug，在字段集中长单词会从元素中跳出来。我用一个简单的word-wrap: break-word解决了这个问题。但后来他们又找到了一个。和另一个。和另一个。

我可以和他争论很长时间，我说这是一个愚蠢的错误，因为没有用户会输入一个60个字母的单词，但修复它可能更容易。你怎么看

* { word-wrap: break-word }

我不知道这会引起什么问题。

编辑:这句话出现在几个地方，在几个不同的上下文中。

在某些地方看起来像这样:

<fieldset>
  <p>Here_is_a_really_long_string</p>
</fieldset>

我们在另一个地方发现了这个:

<table>
..
<td>Here_is_a_really_long_string</td>

我认为我们看到的最大的地方是很长的URL字符串以及我们要导入这个的RSS提要的数据，如here_is_a_string。

我会和QA/项目经理谈谈，但我不知道客户对省略号的看法。

Answer 1

您可以限制区域的宽度，并在末尾添加一些"…"。试试这个

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 2

最好的办法是在需要的地方使用overflow:hidden。你不想重写默认的元素换行

Answer 3

在英语中，60个字母的单词并不常见，但在其他语言中可能不是这样。所以这在一定程度上取决于你的软件将如何被使用，以及谁对这些内容负责。

如果你像你一样修复它，我至少会使用一个更具体的选择器，只对特定的表单或页面的其他相关部分应用换行，而不是所有元素。

还有，我会和Q&A的人谈谈。也许他们会同意这并不是一个真正的问题，但如果你想让他们站在你这一边，我会更加小心地将其称为"愚蠢的bug"。：）但即使他们坚持应该修复，也许他们对应该如何修复有一些想法。也许overflow: hidden或使用省略号是可以接受的，或者他们认为最好使用换行来确保所有文本都是可见的。

无论如何，在大多数情况下，最快的解决方案是进行讨论。一个小的聊天通常比通过拉请求交流更有建设性。