如何使用CSS实现单行省略号

伊丹·谢克特(Idan Shechter)

我希望能够在响应式设计中添加三个点并在一行中保留一个文本。

因此,例如:

我有一个与容器元素内的链接的链接(例如<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的,可以解决这个问题?谢谢。

Praveen Kumar Purushothaman

您实际上不需要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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在嵌套函数中正确使用省略号

来自分类Dev

使用jQuery检测CSS文本超低省略号

来自分类Dev

如何为TD设置省略号

来自分类Dev

flex项目内的CSS省略号

来自分类Dev

R在call()中使用省略号...

来自分类Dev

处理省略号

来自分类Dev

使用CSS省略号在悬停上显示截断的文本会覆盖其下方的文本

来自分类Dev

P标签一行省略号溢出-CSS

来自分类Dev

使用椭圆或省略号出错

来自分类Dev

如何在Bootstrap响应表中使用省略号

来自分类Dev

如何用省略号截断长文本,但总是在省略号后显示图标

来自分类Dev

React.js多行省略号npm插件问题

来自分类Dev

如何避免Dplyr中的省略号...?

来自分类Dev

CSS使用文本溢出时可防止DIV换行:省略号

来自分类Dev

如何使用NSE并使用...(省略号)过滤表达式?

来自分类Dev

如何在css中的两行文本中添加省略号?

来自分类Dev

如何防止CSS Grid井喷,使文本溢出省略号起作用

来自分类Dev

防止asciidoctor用内联文字进行省略号替换

来自分类Dev

结构省略号

来自分类Dev

省略号并在单行中显示多行文本

来自分类Dev

如何在CSS中的省略号文本溢出旁边(右侧)添加文本?

来自分类Dev

如何使用文字溢出:省略号?

来自分类Dev

居中渐变省略号CSS阴影

来自分类Dev

CSS:使用flexbox在中间省略号,在野生动物园中休息

来自分类Dev

如何在Angular中使用省略号和标签实现(动态宽度)文本输入?

来自分类Dev

在表格中使用省略号

来自分类Dev

在 Java 中使用省略号时如何传递数组?

来自分类Dev

如何使用 css 使用用省略号缩短的相同文本在悬停工具提示上显示?

来自分类Dev

S3 方法的正确实现:我什么时候应该使用省略号?

Related 相关文章

热门标签

归档