7.6

一、CSS实现多行文本超长自动省略号 不同分辨率、
1、单行文本超长显示省略号:
white-space:pre(预留格式,和自己)
通过以下三点,可以使文本超长后已省略号显示。 white-space: nowrap(不折行)
overflow:hidden;
text-overflow:clip;
多行文本自动折行:
dispaly:box;
line-climp:2;

。box p{position:relative;
white-space: nowrap;
overflow:
}aa
box p:after{content:"..."}

二、用borde设置三角形

向下的三角形

设置position:absolute;top:13px;
背景图片兼容性较好,伪类的作用是可以简化标签
向右的箭头tooltip
.tooltip{color:#fff;border:#000;font-size:14px;line-height:1.5/设置当前字体大小的1.5倍/;disaplay:inline-block;}
伪类元素before和after一个是放在元素前面,一个是放在元素末尾,可以用其代替标签,本身是行内元素,一般是省标签。
三、div画太极
border-radius:值为宽高的一半即为圆形
.half{width:50px;height:25px;background:red;border-radius:25px 25px 0 0;}
画两个半圆,再画两个园,移动位置,看着像画了个弯线,再画两个小圆即可。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 读书背词会编曲,该多好?每一首晦涩难懂的诗词,都成朗朗上口的歌,美化了听觉也感染了视觉。 1,《苏幕遮 》 张晓棠...
    微凉_Elena阅读 18,565评论 14 66
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,207评论 0 11
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,700评论 0 8
  • 1.CSS简介 Cascading Style Sheet 层叠样式表 主要用来定义页面中的表现,HTML 描述页...
    hyt222阅读 875评论 0 0
  • 广告经历了一百年的发展,由广告是告知产品或服务的新闻到广告是印在纸上的印刷术,再到广告是整合营销传播,你怎样理解广...
    刘二傻阅读 901评论 0 1