我希望能够在响应式设计中添加三个点并在一行中保留一个文本。
因此,例如:
我有一个与容器元素内的链接的链接(例如<span>
)。如果文本很长,它将以两行显示在一个小屏幕上:
This is a very long text
and it wraps because it's very long
我希望该文本显示如下:
This is a very long text...
text-overflow: ellipsis;
如果您为容器设置了宽度,则可以使用,但是在响应式设计和我的Web应用程序中,显然没有指定宽度。
这是HTML:
<div class="itm-title">
<a href="/friendly-url-sample/">This is a very long sentence and I don't want it to wrap, I want three dots</a>
</div>
是否有一个解决方案CSS或jQuery的,可以解决这个问题?谢谢。
您实际上不需要width
在这里“设置”。响应式设计中的所有元素都有其宽度。您可以按照以下规则进行操作:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
评论:这不适用于锚点:
a {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<a href="#">Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept. Learn more about incognito browsing.</a>
有用! :)
width
定<a>
标签。更新了OP的代码
.itm-title {
width: 150px;
}
a {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="itm-title">
<a href="/friendly-url-sample/">This is a very long sentence and I don't want it to wrap, I want three dots</a>
</div>
结果:有效!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句