gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 22:33:46 25 4
gpt4 key购买 nike

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

这是我目前所拥有的:

<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/

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

最佳答案

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

<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

关于html - CSS 仅在第一个元素上溢出省略号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28169988/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com