【用CSS让单行文本溢出显示省略号】

如何用CSS让单行文本溢出显示省略号

<style>

p {

1.设置宽高

width:160px;

height:20px;

font:size:16px;

background-color:pink;

2.默认值,文字换上

white-space:normal;

3.让文字强制在一行显示

white-space:nowrap;

4.让溢出的文字隐藏

overflow:hidden;

5.超出部分用省略号代替

text-overflow:ellipsis;

}

</style>

<body>

<p>和平精英新春版本贺岁片《龙狮城传说》今日上映！</p>

</body>

【用CSS让单行文本溢出显示省略号】相关推荐

web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
css之-单行文本溢出显示省略号，多行文本溢出显示省略号
单行显示省略号 white-spacing:nowrap; overflow:hidden; text-overflow:ellipsis; 规定某行显示省略号 -webkit-line-climp: ...
单行文本溢出显示省略号，单行文本溢出显示省略号
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
css 单行文本溢出显示省略号
有时候我们会遇到这样的情景,在一行显示过长的文字时会溢出,页面将变得很丑陋.这时候我们想要只显示一部分文字,将多余部分以省略号 "..." 的形式显示.那么我们可以通过设置 CSS ...
关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号单行文本溢出显示省略号方法一: .box{width:100px; border:1px solid red; /* 设置内容不换行 */white-space:nowrap;/ ...
css overflow 省略号,图文详解CSS文本溢出显示省略号效果（text-overflow）
在工作中经常会遇到文本溢出,需要显示省略号的情况,那这个省略号是怎么实现的呢?这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号.对CSS文字溢出加省略号这个知识不熟悉 ...
web前端基础 html5+css3（九.精灵图，字体图标，css三角，鼠标样式cursor，.轮廓线 outline，vertical-align，文本溢出显示省略号）
1.精灵图(有效减少服务器介绍和发送请求的次数,提高页面的加载速度) 将网页的小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了 background-position (图片往坐标左边走) ...
CSS文本溢出显示省略号怎么实现？
前言我们经常会遇到网页中有文字溢出会显示省略号,那么这种效果怎么实现呢?本文分别介绍了单行文本溢出显示省略号和多行文本溢出显示省略号的实现方法. 一.单行文本溢出显示省略号代码示例: <!D ...
css文本溢出显示省略号
1.单行文本溢出显示省略号 overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行) text-overf ...

【用CSS让单行文本溢出显示省略号】

【用CSS让单行文本溢出显示省略号】相关推荐

最新文章

热门文章