html - CSS 仅在第一个元素上溢出省略号

Question

我正在尝试这样做，以便始终显示每一行的“地点”。但是，当内容太长时，我希望标题成为带有省略号的标题。

这是我目前所拥有的:

<ul class="results">
   <li class="item"> <span class="title"><a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property</a></span><span class="place">Place</span>
   </li>
</ul>

.item {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

http://jsfiddle.net/m6krvapf/5/

麻烦的是被截断的是行尾，也就是说“地方”先被截断。是否可以始终保留该位置，仅将省略号放在其左侧的内容上？

Answer 1

你可以像这样包裹你想要省略的部分:

<li class="item"> 
    <span class="ellipsis"><span class="title"><a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property</a></span></span>
    <span class="place">Place</span>
</li>

然后使用以下样式:

.item {
    white-space: nowrap;
}
.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    display:inline-block;
    max-width:85%;
}

Example

对于 Place 超过屏幕 15%(大约 230 像素)的较小屏幕，您可以使用以下媒体查询:

@media all and (max-width: 230px) {
    .item {
        overflow:auto;
        padding-right: 3em;
    }

    .ellipsis {
        max-width:none;
        width:100%;
        float:left;
    }

    .place 
    {
        display:inline-block;
        width:3em;
        float:right; 
        margin-right:-3em;
    }
}

Example