将绝对div放置在相对的div时遇到了一些麻烦。我希望我的绝对div（内嵌块）增加直到达到给定的px-amount（最大宽度）。这将按预期工作，直到我向相对div添加宽度（小于绝对div的最大宽度）为止。
我希望absolute-div中的文本在最大宽度（400px）处而不是在相对父div（300px）的边缘处中断。
在给定空格：nowrap时，单词刚好越过绝对div结束。
有谁知道如何解决这个问题？
谢谢！
看：
http://codepen.io/anon/pen/KVJvmZ
html
<div class="relativeContainer">
<div class="absoluteContainer">
Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
</div>
</div>
<div class="relativeContainer">
<div class="absoluteContainer">
This should stay small.
</div>
</div>
的CSS
.relativeContainer {
width: 300px;
height: 100px;
border: 1px solid black;
position: relative;
margin-bottom: 50px;
}
.absoluteContainer {
display: inline-block;
position: absolute;
top: 0;
left: 0;
max-width: 400px; /* Word-break should happen here. */
border: 1px solid red;
}
恐怕无法通过您的标记解决此问题。但是隧道尽头有光：您可以更改标记或使用javascript来实现所需的功能。
根据您的要求，这可以为您提供帮助：http : //codepen.io/anon/pen/eJXYOJ
html
<div class="relativeContainer">
<div class="absoluteContainer">
<div class="contentContainer">
Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
</div>
</div>
</div>
<div class="relativeContainer">
<div class="absoluteContainer">
<div class="contentContainer">
This should stay small.
</div>
</div>
</div>
的CSS
.relativeContainer {
width: 300px;
height: 100px;
border: 1px solid black;
position: relative;
margin-bottom: 50px;
}
.absoluteContainer {
position: absolute;
width: 100vw; /* do a large number of px for ie8 compatibility*/
top: 0;
left: 0;
background-color: lightgray; /* just to show you what I've done*/
}
.contentContainer {
display: inline-block;
max-width: 400px; /* Word-break should happen here. */
border: 1px solid red;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句