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％（约230px）的较小屏幕，您可以使用以下媒体查询：

@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

Answer 2

你可以将跨度转换为块，使用css浮动并交换它们的位置，如this Fiddle中所示，css如下：

.item span {
    display: block;
}
.title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}
.place {
    float: right;
}

这个html：

<ul class="results">
    <li class="item">
        <span class="place">Place</span>
        <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>
    </li>
    <li class="item">
        <span class="place">Place</span>
        <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>
    </li>
</ul>

那样＆＃39;放置＆＃39;总是在右边。其他解决方案是使用原始html，但要制作跨度块，将其向左浮动并为max-width设置span.title，如同this Example中使用此CSS：

.item span {
    display: block;
    float: left;
    line-height: 1em;
}
.title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: calc(100% - 50px);
}

Answer 3

或者您可以使用JS函数裁剪文本，然后将......替换为您想要的任何内容。

function shorten(text, maxLength) {
var ret = text;
if (ret.length > maxLength) {
    ret = ret.substr(0,maxLength-3) + "...";
}
return ret;

}

见这里： http://html5hub.com/ellipse-my-text/

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

3 个答案: