由于容器的大小而断线

Question

在以下代码段中，如何制作#blah

• 1）当超出max-width #blah时，中断（此处为1600px）

• 2）当超出容器宽度时，断行（此处为100％）=＆gt;我希望文本继续在页面的（隐藏）右侧部分？

使用white-space: pre-wrap;会使案例1）和2）中的行都被破坏。

使用white-space: pre;会使这些行永远不会被破坏。

---

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

#blah { 
    font-size: 100px;
    max-width: 1600px;
    white-space: pre-wrap;
}

<div id="container">
<div id="blah">Hahaha hahahah hah sdfds fdsf sd fds f sdf sd fs df sdf sd fs df sdf sd f sdf sd f sdf s df sd f dsf END</div>
</div>

Answer 1

container的宽度需要大于或等于blah的宽度。

来自http://www.w3.org/TR/CSS2/visudet.html#min-max-widths：

1. 根据＆＃34;计算宽度和边距＆＃34;下的规则计算暂定使用的宽度（没有＆＃39; min-width＆＃39;＆＃39; max-width＆＃39;）上方。
2. 如果暂定使用的宽度大于＆＃39; max-width＆＃39;，则会再次应用上述规则，但这次使用的计算值为＆＃39; max-width＆＃39;作为＆＃39; width＆＃39;。
的计算值

使用您的示例：

1. 暂定使用的宽度为100％，这只是视口的宽度。
2. 暂定使用的宽度不大于max-width（除非您的分辨率非常高）。

这就是max-width被忽略的原因。

我在Virtually infinite container (infinite width)发布了一个jQuery解决方案。

但是，这个问题的解决方案要简单得多。将width样式添加到与blah匹配的max-width。这样，container将自动增长以适应。

段

＆＃13;
＆＃13;
#container { 
  position: relative;  
}

#blah { 
  font-size: 100px;
  max-width: 1600px;
  width: 1600px;
  white-space: pre-wrap;
}
＆＃13;
<div id="container">
<div id="blah">Hahaha hahahah hah sdfds fdsf sd fds f sdf sd fs df sdf sd fs df sdf sd f sdf sd f sdf s df sd f dsf END</div>
</div>
＆＃13;
＆＃13;
＆＃13;