我在 IE7 中看到一个问题，将一些 block 内容与一些长文本一起 float 到左侧，我想将其椭圆化(或剪辑)到右侧，所有内容都在宽度受限的容器内:
<!DOCTYPE html>
<html>
<head>
<title>IE7 Float Test</title>
<style>
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.floater {
width: 20px;
height: 20px;
float: left;
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="floater"></div>
<span class="text">This is some long long long long long long text I want on the same line.</span>
</div>
</body>
</html>
在 IE8+ 和所有其他浏览器中，长文本在 float 元素的右侧被适本地省略。在 IE7 中，文本范围被向下推到 float 元素下方，并在那里被椭圆化。有什么方法可以使它与 IE7 中的 float 元素保持在同一行，而无需求助于内联 block hack？
最佳答案
Is there any way to keep this on the same line as the floated element in IE7 without resorting to an inline-block hack?
使用 display: inline-block 和 hack 使其在 IE7 中工作是解决此问题的简单方法 - 我不确定您为什么要避免它。
<!DOCTYPE html>
<html>
<head>
<title>IE7 Float Test</title>
<style>
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.floater {
width: 20px;
height: 20px;
background: red;
display: inline-block;
*display: inline;
zoom: 1;
}
.text {
padding-left: 4px;
}
</style>
</head>
<body>
<div class="container">
<div class="floater"></div><span class="text">This is some long long long long long long text I want on the same line.</span>
</div>
</body>
</html>
关于css - 带有省略号溢出的 IE7 float block 向下推页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8470929/