不需要的换行符

Question

我在absolute位置的容器中有一个#blah - 定位元素absoute。

此处的代码会生成不需要的换行符：

＆＃13;

＆＃13;

#container { position: absolute; }

#blah { 
    position: absolute;    
    max-width: 20em;
    word-wrap: break-word;
}

＆＃13;

<div id="container">
<div id="blah">Blah dqsd</div>
</div>

＆＃13;

＆＃13;

＆＃13;

---

当然，我们可以添加white-space: pre;：这可以解决换行问题，但会使max-width: 20em; 无法解决Firefox ： （

＆＃13;

＆＃13;

#container { position: absolute; }

#blah { 
    position: absolute;    
    max-width: 20em;
    word-wrap: break-word;
    white-space: pre;
}

＆＃13;

<div id="container">
<div id="blah">Blah WWWWWW WWWWWWWWWWWWWWWWWW WWWWWWWWWWWWWWWWWWWWWWWWWWWW WWWWWWWWWWWW</div>
</div>

＆＃13;

＆＃13;

＆＃13;

问题：

如何在第一个单词后没有换行符，但最大宽度仍在Firefox上工作？

Answer 1

您需要为绝对定位的div定义宽度，只是设置max-width将不再具有绝对位置的宽度，而word-wrap: break-word会导致问题：

#container { position: absolute; width:100%}

#blah { 
    position: absolute;    
    max-width: 20em;
    width: 100%;
    word-wrap: break-word;
}

<div id="container">
<div id="blah">Blah dqsd Blah dqsd  Blah dqsd Blah dqsd Blah dqsd Blah dqsd</div>
</div>

Answer 2

在此之前，我们可以讨论原因为什么会造成这种情况。

1. position: absolute：绝对定位的元素尽可能采用最小宽度。在您的情况下，这是第一个单词的长度或最长单词的长度。
2. word-wrap: break-word：在第一个空格中打破可能的单词！

此问题的解决方案很简单。

1. 设置width将解决问题。
2. 使用white-space: nowrap将确保文本不会中断。

我不会说这是一个问题，但这是预期的行为！

Snippet＃1

＆＃13;
＆＃13;
#container { position: absolute; width:100%}

#blah { 
  position: absolute;    
  max-width: 20em;
  width: 100%;
  word-wrap: break-word;
}
＆＃13;
<div id="container">
  <div id="blah">Blah dqsd Blah dqsd  Blah dqsd Blah dqsd Blah dqsd Blah dqsd</div>
</div>
＆＃13;
＆＃13;
＆＃13;

Snippet＃2

＆＃13;
＆＃13;
#container { position: absolute; width:100%}

#blah { 
  position: absolute;    
  max-width: 20em;
  white-space: nowrap;
  word-wrap: break-word;
}
＆＃13;
<div id="container">
  <div id="blah">Blah dqsd Blah dqsd  Blah dqsd Blah dqsd Blah dqsd Blah dqsd</div>
</div>
＆＃13;
＆＃13;
＆＃13;