•   欢迎来到21NN网.
  •   请记住本站网址www.21nn.cn

CSS中如何将超越的文本隐蔽并用省略号替代【css教程】,text-overflow

摘要: 在CSS中文本超越能够运用overflow:hidden来隐蔽以及CSS中的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网别的相干文章!

分享到:

发表评论

评论列表

还没有评论,快来说点什么吧~

公众号二维码

微信公众号