javascript - 具有绝对位置的 HTML div 尝试换行文本。我可以在不使用空格的情况下避免它吗

Question

我有一组位置 = 绝对的 div，它们可以定位在屏幕上。

如果任何 div 的内容不适合屏幕，浏览器会将文本换成多行并尝试适合窗口。

但是，我不希望浏览器这样做，它应该隐藏内容。

编辑：

您可能会将其视为具有绝对定位的页面上的 div。和

1）用户可以拖动div

2）用户可以手动更改div的宽度（有一个拉伸框小部件，用户可以使用）..

所以问题是当用户在屏幕边缘附近拖动 div 时，如果文本超出窗口，文本应该隐藏而不是换行。希望这能更好地解释

如示例所示，显示的块 2 是我想要的。

所以，假设 div 的宽度是 100px，CSS 样式的左侧位置是（屏幕宽度 - 50），那么其余的文本应该隐藏。

解决方案 1：空格：nowrap。不能使用它，因为这是一个灵活宽度的 UI，用户可以根据需要更改 div 的宽度。

解决方案 2：如果我将 div 的宽度显式设置为一个数字，它可以正常工作。

但不是最佳解决方案，因为在这里我总是必须在渲染时计算所有 div 的宽度。

是否有更优化的解决方案，可以让浏览器不尝试将文本放入屏幕。

score 2 · Accepted Answer

很难说出你在问什么。但我认为你可以使用

{
  height: 1.2em;
  overflow: hidden;
}

隐藏超过您支持的一行的内容

score 0 · Accepted Answer

这是你想要的吗？（第二项）

我将内部文本包装在一个很长的 div 中并应用于overflow:hidden它的父级。

score 0 · Accepted Answer

我不确定小部件的确切用例，所以我不能 100% 确定它可以拥有和不拥有什么。我有一个想法，也许它会很有用 - 将宽度设置为 % 可能会有所帮助，就像这样

.block2{
    left: 50%;
    top: 100px;
    width: 100%;
}

你可以在css中设置它以避免用js计算，但就像我说的我不确定它是如何使用的，所以这可能不起作用但它可能会给你一些想法

score 0 · Accepted Answer

如果你把它们都放在一个巨大的（例如 5k px * 5k px 绝对定位的 div 中，你应该会看到预期的效果：http: //jsbin.com/welcome/35862/edit

4 回答 4