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

そして問題は、_This_should_Not_be_on_next_line が次の行から始まるように、ブラウザーが My_very_long_text の後にワードラップ (テキストを次の行に移動) を行うことです。それを防ぐ方法はありますか？

この場合の解決策は、改行「ここにいくつかの他の単語」を挿入するため、絶対位置のdivが存在しないかのようにテキストが出力されるはずです。

追加: 問題を示すテスト ケースを追加しました。（「My_very_long_text」の後に改行するfirefox 16.0.1でテストしました。firebugを開始して絶対位置のスパンを削除すると、テキストが期待どおりに改行されます。しかし、クロムでテストしたところ、期待どおりに機能するので、おそらくこれは単なる 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 を使用して、指定された領域で単語を分割します。

これは言葉を壊します：

word-wrap:break-word;

これは通常通りラップします:

word-wrap:normal;
于 2012-10-15T01:27:18.780 に答える