这是我上次测试时可以在 Chrome、FF、Safari 和 IE11 中使用的策略。
基本上,这个想法是欺骗浏览器认为你有宽度。前面的答案可以正常工作,但是如果您缩小父容器的宽度,您会注意到您的内容在达到该父容器的宽度时开始换行。因此,解决这个问题的想法是使用另一个容器,该容器位于您要将内容锚定到的位置,然后相对于该事物定位您的内容。
这里的区别是我们将使用第一个定位的容器来设置我们想要的最大宽度。由于该容器的高度为 0,因此您甚至都看不到它。
JSFiddle:http: //jsfiddle.net/WmcjM/252/
HTML
<div class="container">
<div class="sizing-container">
<div class="your-text">You can put whatever you want here and you can see that the content wraps when you hit your max-width, but that max-width is actually defined as the width of the sizing container</div>
</div>
</div>
CSS
.container {
position: relative;
background: #ccc;
width: 70px;
height: 70px;
margin-bottom: 100px;
}
.your-text {
position: absolute;
left: 0;
top: 100%;
background: lightblue;
word-break: break-word;
}
.sizing-container {
position: absolute;
display: block;
height: 0px;
background: red;
width: 200px; // This is your max-width!
top: 16px;
left: 100%;
}
.container {
position: relative;
background: #ccc;
width: 70px;
height: 70px;
margin-bottom: 100px;
}
.monkaS {
position: absolute;
left: 0;
top: 100%;
background: lightblue;
word-break: break-word;
}
.poggers {
position: absolute;
display: block;
/* height: 1px; comment this in to see whats happening*/
height: 0px;
background: red;
width: 200px;
top: 16px;
left: 100%;
}
<div class="container">
<div class="poggers">
<div class="monkaS">Standard shit pogchamp chatlethal</div>
</div>
</div>
<div class="container">
<div class="poggers">
<div class="monkaS">P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S P O G G E R S</div>
</div>
</div>
<div class="container">
<div class="poggers">
<div class="monkaS">Short</div>
</div>
</div>
<div class="container">
<div class="poggers">
<div class="monkaS">ReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLongReallyLong</div>
</div>
</div>