IE7 带有省略号溢出的浮动块被推下页面

发布于 2024-12-20 20:44:04 字数 872 浏览 0 评论 0原文

我在 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;
        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+ 和所有其他浏览器中，长文本正确地椭圆化到浮动元素的右侧。在 IE7 中，文本跨度被推到浮动元素下方，并在那里被省略。有没有什么方法可以使其与 IE7 中的浮动元素保持在同一行，而无需诉诸内联块 hack？

原文

I'm seeing an issue in IE7 floating some block content to the left with some long text I would like to ellipsize (or clip) to the right, all inside a container with a constrained width:

<!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>

In IE8+ and every other browser the long text gets ellipsized properly to the right of the floated element. In IE7 the text span gets pushed down below the floated element and is ellipsized down there. Is there any way to keep this on the same line as the floated element in IE7 without resorting to an inline-block hack?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

痴情 2024-12-27 20:44:04

有没有办法让它与浮动元素在同一行
在 IE7 中不诉诸内联块 hack？

使用 display: inline-block 以及使其在 IE7 中工作的 hack 是解决此问题的简单方法 - 我不确定您为什么要避免它。

http://jsbin.com/orozen

<!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>

Is there any way to keep this on the same line as the floated element
in IE7 without resorting to an inline-block hack?

Using display: inline-block and the hack to make it work in IE7 is an easy way to fix this - I'm not sure why you'd want to avoid it.

http://jsbin.com/orozen

<!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>

回复收藏 0 原文

~没有更多了~