html - 防止绝对定位元素分词

标签 html css word-wrap

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

我的 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>

最佳答案

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

关于html - 防止绝对定位元素分词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12888181/

相关文章:

javascript - 测试客户端是否支持 css prop。重复后代码中断

c# - 根据TextWrapping 属性获取TextBlock 的行数?

html - CSS,自动换行

jquery - 表单中的csrfmiddlewaretoken和cookie中的csrfotken不同

html - 如何在html中使输入框与文本区域一样大

html - 简单样式表在 FireFox 中不起作用(字体大小)

css - 无法将 div 一个放在另一个下面

html - 如何使用 CSS 防止列表项中的换行符

jquery - 如何使用 jquery 更改导航栏元素的背景颜色?

html - 想知道为什么自动关闭的 div 不起作用?