Question

我想在表格的单元格中填充一些文本，我的数据就是这样的

object1 -> object2 -> object3 ....................-> objectn

我不想用对象数增加单元格大小，而是想用单元格正确包装它。

我为此目的使用此.css片段

.cellbreak {
  max-width: 300px;
  white-space: normal; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  overflow: hidden;
  display: inline-block;
}

但问题是，我的文字没有任何意义，我的意思是我的输出是这样的

object1 -> object2 -> obje
ct3 -> object4 ->object5 -
> object6 -> object7 ->obj
ect

但我希望我的输出像这样

object1 -> object2 -> object3 ->
object4 -> object5 -> object6 ->

如何修改我的CSS以获得理想的输出。

注意：我已经在stackoverflow中看到了一些帖子，但是我得到了与我的问题相关的任何内容。

提前致谢

Answer 1

摆脱word-wrap: break-word;

如果为元素指定了max-width（就像你的那样），那么里面的文本应该正常换行。

Answer 2

尝试添加你的风格

word-break: normal;

此属性不会破坏中间的单词。

Answer 3

从CSS中删除所有空格，字流和溢出语句，因为它没有达到预期效果。只需替换对象名称和“ - ＆gt;”之间的空格即可与 。

e.g。

object1&nbsp;-> object2&nbsp;-> object3&nbsp;-> object4&nbsp;-> object5&nbsp;-> object6&nbsp;->

＆安培; NBSP;是一个非破坏性的空白角色，也就是说它不会被打破。

这是一个example。

Answer 4

您需要确定“正确包装”的含义，即允许哪个换行点，然后使用允许或禁止换行的各种ways来实现此功能。

假设在这种情况下每个“objectk - ＆gt;”应该保留在一行上，那么你可以使用

<style>
.nobr { white-space: nowrap }
</style>
<span class=nobr>object1 -></span> <span class=nobr>object2 -></span>
<span class=nobr>object3</span> ....................-> <span class=nobr>objectn</span>

如果允许在行的开头也有“ - ＆gt;”，那么你需要更多的span个元素。

在一般情况下，没有基本上更简单的方法（除非你使用<nobr>...</nobr>而不是<span class=nobr>...</span>，更短一些，更强大，但声明非标准）。用不间断空格（ ）替换空格可能看起来有点简单，但它只适用于简单的情况。例如，浏览器仍然可以在各种特殊字符之后或之前中断，甚至可能在两行中打破“＆gt; - ”。（你可以通过使用箭头字符“→”来避免这个特定的问题，这也可能是出于其他原因的好主意。）

自动换行单元格内容

4 个答案: