关于CSS文本超出div或者span时用省略号代替的代码

在项目中我们经常需要在文本过长时显示,将文本超出的部分内容用省略号代替,基于css代码是怎么实现的呢?下面脚本之家小编通过分析本文给大家详解,感兴趣的朋友一起学习吧

在项目中我们经常需要在文本过长时显示,将文本超出的部分内容用省略号代替:
思想为:
首先设置宽度,然后让超出的部分隐藏
如果有超出则在最后显示省略号
让文本不换行
具体css代码为: 

.title{ width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:keep-all; }

登录后复制

Html代码就不用写了,一个p 或者span class = “title”即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

立即学习“前端免费学习笔记(深入)”;

关于css前端的知识点总结

关于css前端的知识点总结

以上就是关于CSS文本超出div或者span时用省略号代替的代码的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2897354.html

(0)
上一篇 2025年3月10日 23:23:06
下一篇 2025年3月7日 08:44:46

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 关于CSS中list-style修改列表属性控制li标签样式的问题

    这篇文章主要介绍了关于css中list-style修改列表属性控制li标签样式的问题,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 list_style属性用于修改列表的属性,list-style-type用于设置列表项类型…

    编程技术 2025年3月10日
    200
  • 关于CSS中的before和:after伪元素的使用分析

    这篇文章主要介绍了css中的before和:after伪元素使用详解,包括对一些非文本内容的插入操作使用,需要的朋友可以参考下 如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得…

    2025年3月10日
    200
  • JS和CSS实现渐变背景特效的代码

    这篇文章主要介绍了js和css实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及javascript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下 本文实例讲述了JS+CSS实现的漂亮渐变背景特效代码。分享给大家供大家参考,具体如…

    2025年3月10日
    200
  • 如何解决CSS图片下面有间隙的问题

    这篇文章主要介绍了css图片下面有间隙的6种解决方案,需要的朋友可以参考下 在进行页面的p+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於 该问题的解决方法也是「见机…

    编程技术 2025年3月10日
    200
  • 如何用CSS实现带阴影效果的黑色导航菜单效果

    这篇文章主要为大家介绍了css实现带阴影效果的黑色导航菜单效果,通过css设置背景图片切换效果实现带阴影的导航菜单功能,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了CSS实现带阴影效果的黑色导航菜单效果。分享给大家供大家参考。…

    2025年3月10日
    200
  • 如何设置CSS 文本字体颜色

    这篇文章主要介绍了css 文本字体颜色设置方法(css color),需要的朋友可以参考下 一、认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些;网页颜色规定规范。 1、常用颜色地方包含:字体颜色、超链接颜色、网…

    2025年3月10日
    200
  • DIV和CSS实现仿京东商城导航条效果

    这篇文章主要为大家介绍了p+css实现仿京东商城导航条效果,涉及页面p+css布局涉及结合onmouseout鼠标事件动态切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了p+CSS实现仿京东商城导航条效果。分享给大…

    2025年3月10日
    200
  • 利用CSS自定义绿色复选框按钮的样式

    这篇文章主要介绍了关于CSS自定义绿色复选框按钮的样式,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 HTML自带的复选框或者单选框按钮样式都是比较简单的一种. 而有时候这些表单控制, 可能需要配合自己的主题样式. 需要去美…

    2025年3月10日
    200
  • 如何使用css transition属性实现带动画显隐的微信小程序部件

    这篇文章主要介绍了使用css transition属性实现一个带动画显隐的微信小程序部件的相关资料,需要的朋友可以参考下 我们先来看效果图 像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可…

    2025年3月10日
    200
  • webpack混用css module的方法

    这篇文章主要介绍了webpack项目轻松混用css module的方法,内容挺不错的,现在分享给大家,也给大家做个参考。 前言 本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。 比如antd-m…

    编程技术 2025年3月10日
    200

发表回复

登录后才能评论