随着浏览器窗口缩小,标题不会溢出省略号

时间:2012-07-06 17:05:17

标签: mobile css3 overflow whitespace

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>

1 个答案:

答案 0 :(得分:1)

尝试从.details

中移除浮动
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