停止文本水平溢出

Question

我有一个div，这个div 里面是文本，这个文本水平溢出，我想停止它。

不幸的是，这比最初听起来要复杂一些，因为我想创建一个有两列的div，并且我希望右列比左列宽 30px。

我知道我可以通过创建两个divs 来解决这个问题，但是如果有一种方法可以用一个div 来解决这个问题，那就太棒了。通过使用父元素和子元素并将margin-right: -30px; 添加到子元素，我或多或少能够做到这一点，但不幸的是，即使它存在，这个边距似乎也塌陷到子元素中并且文本完全忽略它。

如果我能解决这个问题，我会节省很多工作，有什么想法吗？

小提琴：https://jsfiddle.net/qxnc3fts/3/

-> 目标： 确保文本不会溢出浅灰色div。

编辑： 有一个类似的问题：Is there a way to specify different widths for columns in CSS3?，@Quentin 有一个很好的答案肯定对我有帮助，但这个答案不会使文本中断，我希望发生。 ——但这似乎是不可能的。至少在当前的 CSS 版本中。

.ref {
  width: 200px;
  height: 10px;
  background-color: black;
}

.parent {
  background-color: lightgrey;
  width: 400px;
}

.child {
  column-count: 2;
  column-gap: 30px;
  margin-right: -30px;
}

<div class="ref"></div>

<div class="parent">
  <div class="child">
    i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i 
  </div>
</div>

Answer 1

您将框设置为绝对宽度并且内容不会溢出。
这是一个可行的解决方案：

.ref {
  width: 200px;
  height: 10px;
  background-color: black;
}

.parent {
  background-color: lightgrey;
  width: 400px;
}

.child {
  column-count: 2;
  column-gap: 3.5%;
  margin-right: -30px;
  overflow-x: auto, hidden;
  padding: 8px 30px;
  word-break: keep-all;
  display: inline-block;
  text-align: center;
}

<div class="ref"></div>

<div class="parent">
  <div class="child">
    i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i 
  </div>
</div>