您的位置首页百科问答

CSS3.0中的text-overflow属性如何使用

CSS3.0中的text-overflow属性如何使用

的有关信息介绍如下:

CSS3.0中的text-overflow属性如何使用

新闻列表是前端布局中很常见一种版块,如果某条新闻字符过长超出的部分我们就将其显示为“…”,可让我们的版面更加美观,现在我们学习一下如何使用text-overflow来实现,最终的效果如下图所示:

编写新闻列表的HTML结构并对结构进行CSS基础样式设定,代码如下图所示:

打开浏览器,效果如下图所示,我们看到,超出范围的标题文字进行了自动折行

这一步很重要,我们继续优化CSS样式,具体代码和效果图如下图所示:

设置鼠标悬停后的CSS样式,具体代码和预览效果如下所示: