Question

文本溢出仅在宽度为像素且不接受百分比时才有效。我有问题火狐不知道其他浏览器。

<div class="items">
    <div class="item">
            <div class="name">Title Long Long Long Long Long 1</div>
            <div class="desc">Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum</div>
    </div>
    <div class="item">
        <div class="name">Title Long Long Long Long Long 2 </div>
        <div class="desc">Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum</div>
    </div>
</div>

.items {
   width:30%;
}
.item {
  display:table;
}
.item .name ,.item .desc  {
  display:table-cell;
        white-space: nowrap;
    text-overflow: ellipsis;    
    overflow: hidden;   
}
.item .name {
    width:20%;
}
.item .desc {
    width:80%;
}

这里的小提琴链接：Demo

为了使其工作，我需要设置maxwidth。这将影响响应的元素

.item .desc {
    max-width: 105px;
    width: 80%;
 }

Answer 1

此处的主要问题是您使用table(-*) display值格式化元素。

表格有自己的布局算法，其中一个基本组成部分是“将内容设置为显示内容所需的宽度”。

如果您不希望这样，并希望无论如何都要遵守您指定的宽度，则需要使用table-layout:fixed。最重要的是，您需要在此处为width:100%元素指定table，否则它们仍然会从有限宽度的容器中流出。

.items {
   width:30%;
}
.item {
  display:table;
  table-layout:fixed; /* added, so that width specifications will be honored */
  width:100%; /* needed so that these tables honor width of parent element */
}
.item .name ,.item .desc  {
  display:table-cell;
  white-space: nowrap;
  text-overflow: ellipsis;    
  overflow: hidden;   
}
.item .name {
  width:20%;
}
.item .desc {
  width:80%;
}

<div class="items">
    <div class="item">
            <div class="name">Title Long Long Long Long Long 1</div>
            <div class="desc">Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum</div>
    </div>
    <div class="item">
        <div class="name">Title Long Long Long Long Long 2 </div>
        <div class="desc">Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum Lore Lipsum</div>
    </div>
</div>

http://jsfiddle.net/bd3qxrpL/2/

Answer 2

百分比宽度不会导致您的问题，实际上是display:table-cell属性。如果删除它，您可以看到它按预期工作。如果可行，请尝试使用inline-block。

CSS文本溢出省略号+宽度％不起作用

2 个答案: