关于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前端的知识点总结

用html5的63行代码实现贪吃蛇游戏

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

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 01:08:30
下一篇 2025年12月24日 01:08:43

相关推荐

  • 关于css前端的知识点总结

    下面为大家带来一篇css前端知识点总结。内容挺不错的,现在就分享给大家,也给大家做个参考。 1、css的概念:(CascadingStyleSheet级联样式表) 优点:1.内容与表现分离。(用网页的内容xhtml就可以与表象分开) 2.表象统一 3.丰富的样式 立即学习“前端免费学习笔记(深入)”…

    好文分享 2025年12月24日
    000
  • 关于CSS中list-style修改列表属性控制li标签样式的问题

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

    好文分享 2025年12月24日
    000
  • padding制作图片自适应布局(CSS百分比)

    css知识点:当padding/margin取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的! 一、CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相…

    2025年12月24日
    000
  • 如何使用源生css3实现圆环加载进度条

    这次给大家带来如何使用源生css3实现圆环加载进度条,使用源生css3实现圆环加载进度条的注意事项有哪些,下面就是实战案例,一起来看一下。 效果图: 当时的要求是让进度条以扇形渐变的效果加载。我想了半天,好像只有用border-img来做渐变图了,还有一个超笨的方法就是写50个长方形分布在进度条上。…

    2025年12月24日
    000
  • CSS 文本字体颜色设置方法(CSS color)

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

    2025年12月24日
    000
  • 用纯CSS实现禁止鼠标点击事件示例代码

    这篇文章介绍的是通过纯css实现禁止鼠标点击事件,比起javascript来更加灵活,有需要的可以参考学习。 JavaScript有一个preventDefault方法, 他可用以来取消事件的默认动作。比如取消打开链接,选择文本或拖放等。 复制代码 代码如下: event.preventDefaul…

    好文分享 2025年12月24日
    000
  • CSS实现带倒三角标记的WEB标准菜单效果代码

    这篇文章主要为大家介绍了css实现带倒三角标记的web标准菜单效果代码,通过纯css实现鼠标滑过呈现倒三角标记的显示效果,非常简单实用,需要的朋友可以参考下 本文实例讲述了CSS实现带倒三角标记的WEB标准菜单效果代码。分享给大家供大家参考。具体如下: 这里演示css实现的带倒三角标记的WEB标准菜…

    好文分享 2025年12月24日
    000
  • CSS实现带有小图片的LI图标列表菜单

    这篇文章主要为大家介绍了css实现带有小图片的li图标列表菜单,可实现css图标的正常显示及滑过、点击呈现不同颜色的功能,涉及css针对visited、hover及active等使用技巧,需要的朋友可以参考下 本文实例讲述了CSS实现带有小图片的LI图标列表菜单。分享给大家供大家参考。具体如下: 这…

    2025年12月24日
    000
  • CSS实现页面九宫格布局的简单示范

    九宫格布局在制作一些web app时还是经常可以用到的,这里我们以一个大概的结构示例来作css实现页面九宫格布局的简单示范,不过需要注意ie6下的兼容性问题. 一、效果图: 三、布局二(各浏览器兼容性良好) 立即学习“前端免费学习笔记(深入)”; CSS Code复制内容到剪贴板 九宫格布局 bod…

    2025年12月24日
    000
  • css实现图片切换效果

    本篇文章主要介绍css实现图片切换效果非常不错,不用css,代码比较精简,推荐使用,注意一下多浏览器的兼容性。 代码如下: 纯css图切换 练习 教程来自snwebsite a{ display:block; border:1px solid #cccccc; width:20px; height:…

    好文分享 2025年12月24日
    000
  • 如何使用css固定位置

    本篇文章主要介绍如何使用css固定位置,非常不错,可以方便提示用户等信息,有感兴趣的小伙伴了解一下。 代码如下: 层固定位置练习–by 阿会楠 html,body{ overflow:hidden; padding:0; margin:0; width:100%; height:100%; } #…

    2025年12月24日
    000
  • css中font的缩写

    本篇文章将详细介绍css中font的缩写,有感兴趣的小伙伴参考一下。 实例代码如下: .login_top{height:26px;font:bold 14px/26px “宋体”; border:1px solid #000} .login_top2{height:26px; line-heigh…

    好文分享 2025年12月24日
    000
  • css中Sprites的应用

    本篇文章主要介绍css中sprites的应用,这是一个很简单的应用,不过在设计中,这样做可以减轻服务器的压力,是请求次数减少,是一个不错的方法。 实例代码如下: body { font-family: “Lucida Sans”, “Lucida Sans Unicode”; font-size: …

    好文分享 2025年12月24日
    000
  • 用CSS实现的一张图完成的按钮实例

    本篇文章主要介绍如何用css实现的一张图完成的按钮实例,很好用很奥妙,值得收藏和分享 通过css来读取图片坐标系实现局部背景图,感兴趣的小伙伴参考一下。 网易126登录按钮代码如下: .inp_L1,.inp_L2,{background:url(/upload/20080515201218970.…

    好文分享 2025年12月24日
    000
  • css动画教程

    本篇文章主要向大家介绍如何使用css制作简单的动画,感兴趣的小伙伴参考下. 案例一: 创想鸟 div{width:100px;height:100px;background:red;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox …

    好文分享 2025年12月24日
    000
  • css登录界面美化

    本篇文章主要介绍如何用css美化网站登录界面,需要的小伙伴参考下。 代码如下: 美化登录 *{margin:0;padding:0;}/*去掉页面样式*/ body{color:white;} .content{ background-color:pink; position:absolute;/*…

    好文分享 2025年12月24日
    000
  • css如何实现鼠标滑过缩略图时放大图片

    本篇文章主要介绍css如何实现鼠标滑过缩略图时放大图片,日常购物网站中非常方便实用,有兴趣的小伙伴参考下。 代码如下: www.php.cn 创想鸟 鼠标滑过缩略图时放大图片 本例旨在展示鼠标滑到缩略图上时,放大图片。 @@##@@ 相关推荐: 如何使用HTML+CSS做出鼠标划过就可以显示二级菜单…

    好文分享 2025年12月24日
    000
  • css实现鼠标触发效果

    本片文章主要介绍使用css实现鼠标触发效果,感兴趣的朋友参考下。 代码如下: css打造鼠标触发效果 <!– startList = function() { if (document.all&&document.getElementById) { navRoot = doc…

    好文分享 2025年12月24日
    000
  • 详细介绍有关CSS页面布局技巧

    下面是我给大家整理的详细介绍有关CSS页面布局技巧,有兴趣的同学可以去看看。 设置文本样式 1、字体类型 绝大多数用户系统默认支持的中文字体有宋体、黑体、幼圆、楷体;默认支持的英文字体有arial、arial black、arial narrow、 century gothic 、comic san…

    好文分享 2025年12月24日
    000
  • 简单易懂,DIV+CSS架构网站的7种版面布局形式,一语道破

    下面是我给大家整理的div+css架构网站的7种版面布局形式,有兴趣的同学可以去看看。 1.“T”结构布局形式。所谓“T”结构,就是指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,整体效果类似英文字母“T”,所以称之为“T,形布局。这是网页设计中用得最广泛的一种布局方式。这种…

    好文分享 2025年12月24日
    000

发表回复

登录后才能评论
关注微信