文本不应与父元素宽度的变化对齐

Question

我在div中有简单的p元素。

我想要的是p中的文本不应该在div宽度的变化上对齐。

如果div的宽度是100vw，然后它减少到20vw（带有一些动画），那么文本应该与之前相同（隐藏溢出），意味着文本不应该通过进入下一行来对齐自己等等。

我尝试在p中使用position:fixed，但后来overflow-x:hidden无效。

Answer 1

您要查找的媒体资源是white-space。您可以为 free(spline->y_vals); spline->y_vals = ys; return 0 } 元素将其设置为nowrap，以便在父p的宽度减小时不会换行的文本

div

div {
  background: #fff;
  overflow: hidden;
  border: 1px solid;
  margin-bottom: 20px;
}

.a {
  width: 200px;
}

.b {
  width: 50px;
}
p {
  overflow: hidden;
  white-space: nowrap;
}

Answer 2

尝试将white-space: pre添加到p元素。

编辑：如果您想将所有文字仅保留在一行中，则使用white-space: nowrap的Sinstein解决方案可以正常工作。如果要保留现有换行符，则应使用pre。