提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > CSS中如何将超越的文本隐蔽并用省略号替代【html5教程】,text-overflow

在CSS中文本超越能够运用overflow:hidden来隐蔽以及CSS中的text-overflow属性给隐蔽部份增加省略号

经常在写页面的时刻会遇到笔墨内容太多凌驾盒子内容关于这类状况我们会常经常使用overflow:hidden来隐蔽,然则本日就要通知人人一个新的小知识点,我们能够用它将超越部份的文章隐蔽,并用省略号替代,接下来将在文章中细致和人人引见

html代码

p{
width:300px;
height:30px;
border: 1px solid #ccc;
text-align: center;
font-size: 12px;
line-height:30px;
}
</style>
</head>
<body>
<p>ki4网供应大批免费、原创、高清的php视频教程,并按期举办公益php培训!可边进修边在线修正示例代码,检察实行结果!
php从入门到通晓,一站式php自学平台!</p>

text-overflow 属性

划定当文本溢出包括元素时发作的事变,它是CSS3中的属性,它有三个值分别为

clip:修剪文本,将超越部份删除

text-overflow:clip;
overflow:hidden;
white-space:nowrap;划定段落中的文本不举行换行

ellipsis:用省略号来替代被删除的内容

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

当鼠标放上时被隐蔽的字显现

overflow:visible;

总结:以上就是本篇文章的全部内容了,愿望对人人有所协助。

以上就是CSS中如何将超越的文本隐蔽并用省略号替代的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS中如何将超越的文本隐蔽并用省略号替代【html5教程】,text-overflow"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线