Question

我有一个包含一组div的布局，每个div包含三个不同字体的字段，显示为：

Author
Title Date

因此结构如下：

<div>
  <div class="author">author</div>
  <div>
    <span class="title">title</span>
    <span class="date">date</span>
  </div>
</div>

块是固定宽度但字段是可变宽度。我希望作者和标题在它们太长时被切断，所以我申请了：

.author, .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

这适用于作者，但只有当日期已移至下一行时，标题才会被截断。我希望一旦日期击中右侧，标题就会被删除：

+---------------------------------+
| This is a very very long auto...|
| This is a long ti... (yesterday)|
+---------------------------------+

这可以用css吗？

修改

一些澄清。我理解如何给出标题最大宽度，如各种答案中所示，但这不是我需要的。整个框具有固定宽度，并且所有字段具有可变宽度。

但是第二行需要在第一个字段（标题）而不是最后一个字段（日期）中被切断。 因此，我希望标题的最大宽度取决于日期的宽度。示例：

+---------------------------------+
| This is a very very long auto...|
| Short title (2 days ago)        |
+---------------------------------+

+---------------------------------+
| Some author                     |
| Bit Longer tit.. (long time ago)|
+---------------------------------+

+---------------------------------+
| Another author                  |
| This is a long ti... (yesterday)|
+---------------------------------+

即使我将它限制在最先进的浏览器中，或者当我开始用像桌子这样丑陋的东西来破解HTML时，我也看不出CSS的可行性。

然而，这似乎是向最终用户显示数据的最简洁方式，所以我希望有人知道这个魔术......

Answer 1

我使用一些Javascript（javascript）在FF中工作。我还没有使用省略号 - 但是还有一些工作可行（使用背景图像方法）。

将其粘贴到.html文件中以查看概念验证 - 加载时调整浏览器卷绕器的大小，使其更窄，看它会自动移动并提供您想要的包装效果。

<html>
 <head>
  <title>test</title>
  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js'></script>
  <style type='text/css'>
   .author, .title {
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
   }
   .title, .date {
    float: left;
   }
   .date {
    margin-left:10px;
   }

   .author {
    background-color: red;
    color: white;
   }
   .title {
    background-color: blue;
    color: white;
   }
   .date {
    background-color: green;
    color: white;
   }
  </style>
  <script type='text/javascript'>
   $.resizeHeader = function() {
    var _title = $('#title');
    var _date = $('#date');
    var _container = $('#headingContainer');
    _title.css('width','auto');
    var _containerWidth = _container.width();
    var _titleWidth = _title.outerWidth(true);
    var _dateWidth = _date.outerWidth(true);
    if ((_dateWidth+_titleWidth)>_containerWidth) {
     var _deltaWidth = (_dateWidth+_titleWidth)-_containerWidth;
     var _newTitleWidth = _titleWidth-_deltaWidth;
     _title.width(_newTitleWidth);
    }
   }

   $(function() {
    $(window).resize(function() {
     $.resizeHeader();
    }).resize();;
   })  
  </script>
 </head>

 <div id='headingContainer'>
  <div class="author">This is an author title</div>
  <div>
   <span class="title" id='title'>This is the title which is very long and prone to spill over and over and over and over and over</span>
   <span class="date" id='date'>The Date</span>
  </div>
 </div>
</html>

Answer 2

除非另有说明，否则

'span'元素将被视为内联元素。您需要约束.title的宽度才能到达容器div的一侧。

以下内容可能有效：

.title{display:block;max-width:60px;}

修改

好的，再玩一点，这似乎可以实现你的标记（假设它被命名为“#wrapper”）

div#wrapper{width:160px;border:1px solid #ccc;overflow:auto} .author, .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .title{display:block;width:60%;float:left} .date{display:block;width:40%;float:right;}

Answer 3

你需要做一些事情，比如把日期漂浮一下。另外，请记住Firefox不支持text-overflow: ellipsis;你必须在http://mattsnider.com/css/css-string-truncation-with-ellipsis/ ...

使用类似Matt Snider的方法

如果你不能漂浮日期，你想要的是不可能的。你需要重新考虑你的设计。

Answer 4

如果我正确理解你要做的事情，这是我的解决方案。即使您不知道标题的宽度，标题也有可能溢出。既然如此，那么你就应该确定它溢出的时间和地点。我没有看到没有设置max-width的方法。

.author, .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title {
  max-width: 150px;
  display:inline-block;
}
.date {
  display:inline-block;
  vertical-align:top;
}

<div>
  <div class="author">author</div>
  <div>
    <span class="title">Really really really really long title</span>
    <span class="date">Date</span>
  </div>
</div>

Browser Compatibility of max-width

Answer 5

也许修复了作者元素的高度？

.author {
    height: 1.2em;
}

可能不起作用，CSS几乎遵循HTML的基本流程布局，它假设元素的高度会随着内容的不同而变化。

Answer 6

你要做的是绝对定位＆lt; span class =“date”＆gt;容器右下角的元素＆lt; div＆gt;并在其上设置背景图像（包含省略号）并确保z-index设置在＆lt; span class =“title”＆gt;之上;元件。然后你只需让.title元素在.date元素下运行，一切都应该很好。

div
{
    width: 200px;
    position: relative;
}
.author, .title
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.date
{
    background-color: #fff;
    background-image: url(/images/ellipsis.gif);
    background-position: left bottom;
    background-repeat: no-repeat;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 10;
    padding-left: 10px; /* Assuming that the bg image is this size */
}
.title
{
    z-index: 0;
}

它在FF3.5，Chrome和IE8中对我有用，虽然已经提到文本溢出：省略号在浏览器上不能正常工作。

在包装下一个元素之前应用溢出隐藏

6 个答案: