CSS文字溢出省略号+以％表示的宽度不起作用

Question

仅当宽度以像素为单位且不接受百分比时，文本溢出才会起作用。我在使用Firefox时遇到问题，不了解其他浏览器。

<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%;
}

小提琴链接在这里：演示

为了使其正常工作，我需要设置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/