Question

有没有办法防止空的绝对定位块元素导致自动换行？

我的HTML看起来像

    some other words here. 
My_very_long_text<div style='position: absolute; width:20px; height:20px; background-color:green;'></div>_This_should_Not_be_on_next_line

问题是浏览器会在My_very_long_text之后执行自动换行（将文本移动到下一行），以便_This_should_Not_be_on_next_line 确实从下一行开始。有没有办法阻止它？

在这种情况下，解决方案会在此处插入换行符“其他一些单词”，因此应输出文本，就好像绝对定位的div不存在一样。

加了： 我添加了一个显示问题的测试用例。（在firefox 16.0.1中测试，它在“My_very_long_text”之后断行。如果我开始使用firebug并删除绝对定位的span，那么文本会按预期中断。但我只是在chrome中测试它并且它按预期工作，所以也许这只是一个火狐虫。

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div style='width:600px; background-color:red; position:relative; font-size:14px; font-family: monospace'>
so much better to test it this way My_very_long_text<span style='position: absolute; width:20px; height:20px; background-color:green;'></span>_This_should_Not_be_on_next_line
</div>
</body>
</html>

Answer 1

绝对位置元素对文档的常规流没有影响。绝对定位的元素不会推动＆＃39;周围的其他元素，它们存在于自己的平面上。其他东西导致了自动换行。

Answer 2

您可以使用CSS溢出或自动换行属性。

隐藏溢出：

overflow:hidden;

滚动溢出：

overflow:scroll;

同时滚动溢出，更常见的方法：

overflow:auto;

或者，使用自动换行来打破指定区域的单词。

这会打破单词：

word-wrap:break-word;

这通常包装：

word-wrap:normal;

Answer 3

我遇到了同样的问题，我找到的唯一解决方案是在有问题的单词周围添加带有 span 的 white-space: nowrap。

<!DOCTYPE HTML>
<html>
<head></head>
<body>
  <div style='width:600px; background-color:red; position:relative; font-size:14px; font-family: monospace'>
    so much better to test it this way <span style='white-space: nowrap'>My_very_long_text<span style='position: absolute; width:20px; height:20px; background-color:green;'></span>_This_should_Not_be_on_next_line<span>
  </div>
</body>
</html>

防止绝对定位元素划分单词

3 个答案: