css3怎么设置a标签超出部分为省略号

方法:1、利用“overflow:hidden;”样式设置a标签文本超出隐藏;2、利用“display: block;”将a标签设置为块级元素;3、利用“text-overflow:ellipsis;”设置a标签超出部分的样式为省略号即可。

css3怎么设置a标签超出部分为省略号

本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

css3怎么设置a标签超出部分为省略号

text-overflow 属性指定当文本溢出包含它的元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (…) 或显示自定义字符串(不是所有浏览器都支持)。

text-overflow: clip|ellipsis|string|initial|inherit;

登录后复制

clip    剪切文本。

ellipsis    显示省略符号 … 来代表被修剪的文本。

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

示例如下:

a标签文本给出一个固定长度和样式就可以显示省略号

css:

 .cont {            width: 180px;            white-space: nowrap;            overflow: hidden;            text-overflow: ellipsis;            display: block;            float: left;        }

登录后复制

html:

这是一个名称很长的文档吧要测试超出功能

登录后复制

显示效果如图:

06.png

(学习视频分享:css视频教程)

以上就是css3怎么设置a标签超出部分为省略号的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月11日 20:52:45
下一篇 2025年3月5日 16:21:37

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

相关推荐

  • css3动画效果属性canvas和svg的区别是什么

    区别:1、canvas画的是位图,而svg画的是矢量图;2、canvas节点多时渲染较快,而svg节点多时渲染较慢;3、svg支持分层和事件,而canvas不支持;4、canvas依赖分辨率,而svg不依赖分辨率。 本教程操作环境:wind…

    2025年3月11日
    200
  • 设置单词间距的CSS3样式是什么

    设置单词间距的CSS3样式是“word-spacing:单词间距值;”;“word-spacing”属性用于增加或减少字与字之间的空白,也就可以设置单词之间的间距,数值也可以设置为负值。 本教程操作环境:windows10系统、CSS3&a…

    2025年3月11日 编程技术
    200
  • css3怎么实现圆形转动的效果

    方法:1、用“border-radius:100%”设置元素为圆形;2、用“@keyframes 名称{100%{transform:rotate(360deg);}}”设置动画;3、用“animation:名称 时间”给元素绑定动画效果。…

    2025年3月11日
    200
  • 鼠标经过旋转元素的css3代码是什么

    代码是“元素:hover{animation:名称 时间}@keyframes 名称{100%{transform:rotate(旋转角度);}}”;hover选择器设置鼠标经过的样式,animation和@keyframes设置元素动画。…

    2025年3月11日
    200
  • 在css3动画中用什么定义旋转动画

    在css3中,可以利用@keyframes规则、animation和transform属性定义旋转动画;animation属性用于绑定元素动画效果,@keyframes规则用于设置元素动画动作,transform属性用于设置元素的旋转样式。…

    2025年3月11日
    200
  • css3怎么实现卡片翻转效果

    方法:1、用animation属性给卡片元素绑定翻转动画;2、用“@keyframes”规则和transform属性设置元素翻转动画动作,语法为“@keyframes 名称{100%{transform:rotateY(翻转角度);}}”。…

    2025年3月11日
    200
  • webgl和css3是什么

    webgl是“Web Graphics Library”的缩写,是一种3D绘图协议,用来在网页上绘制和渲染复杂三维图形,并且允许用户与之进行交互;css3是css层叠样式表的技术升级版本,是用来表现html或xml等文件样式的计算机语言。 …

    2025年3月11日
    200
  • css3中border是什么

    在css3中,border是一个用于设置元素边框的简写属性;该属性的属性值按照顺序分别用于设置元素边框的宽度、样式和颜色,语法为“border:边框宽度 边框样式 边框颜色;”,如果不设置某个值也是允许的。 本教程操作环境:windows1…

    2025年3月11日
    200
  • css3怎么设置向哪个方向3d旋转

    方法:1、用“transform: rotateX(角度);”样式设置元素沿X轴方向3d旋转;2、用“transform: rotateY(角度);”样式设置元素沿Y轴方向3d旋转;3、用rotate3d()方法设置元素向任意方向3d旋转。…

    2025年3月11日 编程技术
    200
  • css3怎么去掉文本下划线

    在css3中,可以利用“text-decoration”属性来去掉文本下划线,该属性用于规定添加到文本的修饰,当属性值设置为“none”时,可以规定一个标准的文本,也就会去掉文本的下划线,语法为“text-decoration:none”。…

    2025年3月11日
    200

发表回复

登录后才能评论