1

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

我的 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 并删除绝对定位的跨度，那么文本会按预期中断。但我只是在 chrome 中对其进行了测试，它可以按预期工作，所以也许这只是一个Firefox错误。

<!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>
4

3 回答 3

1

绝对位置元素对文档的常规流程没有影响。绝对定位的元素不会“推动”其他元素，它们存在于自己的平面上。其他原因导致自动换行。

于 2012-10-15T01:27:23.710 回答
0

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

隐藏溢出：

overflow:hidden;

滚动溢出：

overflow:scroll;

也滚动溢出，更常用的方法：

overflow:auto;

或者，使用自动换行在指定区域断开单词。

这将打破的话：

word-wrap:break-word;

这通常换行：

word-wrap:normal;
于 2012-10-15T01:27:18.780 回答
0

我遇到了同样的问题，我找到的唯一解决方案是在有问题的单词周围添加一个spanwith 。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>

于 2021-08-11T17:15:17.067 回答