http://jsbin.com/oqotew/edit#html,live
如果您在宽浏览器窗口中访问上面的链接，文本会出现在图像的右侧。如果缩小窗口，文本会跳到图像下方。
目标:我希望文本始终保持在图像的右侧，并在窗口太窄无法容纳文本时溢出“...”，而不是将其撞到图像下方。那可能吗？
我的 CSS 看起来像这样:
img { float: left; margin-right: 10px; }
.details { float: left; }
a { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #39C; font-size: 16px; text-decoration:none; }
HTML:
<img src="http://placehold.it/130x65" />
<div class="details">
<a href="#">Kind of a long title for a url. This should overflow with ellipsis if the browser gets narrower.</a>
</div>
最佳答案
尝试从 .details 中移除 float
img { float: left; margin-right: 10px; }
a { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #39C;
font-size: 16px; text-decoration:none; }
已更新 demo
关于mobile - 随着浏览器窗口缩小，标题不会溢出省略号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11366641/