首页 > 其他分享 >日常常用css样式大全,超出隐藏,不换行,省略号,两行超出隐藏,不换行,省略号,CSS中划线(删除线)样式代码 (价格),a超链接下划线,css 3个4个5个字两边对齐,鼠标手形状,垂直...

日常常用css样式大全,超出隐藏,不换行,省略号,两行超出隐藏,不换行,省略号,CSS中划线(删除线)样式代码 (价格),a超链接下划线,css 3个4个5个字两边对齐,鼠标手形状,垂直...

时间:2022-11-07 17:24:25浏览次数:38  
标签:省略号 换行 text 样式 对齐 css

文字去掉默认抛边

line-height:1;

超出隐藏,不换行,省略号

overflow:hidden;   //超出的文本隐藏
text-overflow:ellipsis;   //溢出用省略号显示
white-space:nowrap;   //溢出不换行

两行超出隐藏,不换行,省略号

  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

CSS中划线(删除线)样式代码 (价格)

text-decoration:line-through;

a超链接

text-decoration: underline;  /*加下划线*/

text-decoration:none;     /*删除下划线*/

a链接伪元素
a:link    /未访问的链接/

a:visited   /访问过的链接/

a:hover   /鼠标经过时/

a:active   /在鼠标点击的同时/

css     3个4个5个字两边对齐
text-align-last: justify;

text-align: justify;

text-justify:distribute-all-lines;

边框样式border
none    //无边框

dotted   //边框为点线

dashed   //边框为长短线

solid    //边框为实线

double  //边框为双线

鼠标手形状
cursor:hand;

垂直对齐
vertical-align   //参数

top  //顶对齐

bottom  //底对齐

text-top   //相对文本顶对齐

text-bottom  //相对文本底对齐

baseline //基准线对齐

middle  //中心对齐

sub  //以下标的形式显示

super  //以上标的形式显示

css文本缩进
text-indent   // 缩进距离

12px相当于一个文字距离

字体样式
font-family : 宋体,sans-serif;       /文字字体/

font-style: itelic;      /文字斜体/

letter-spacing :  1pt;    /字间距离/

列表样式
list-style-type    //样式

circle    // 标记是空心圆

square   // 标记是实心方块

decimal    //标记是数字

lower-roman    //小写罗马数字

upper-roman   // 大写罗马数字

标签:省略号,换行,text,样式,对齐,css
From: https://www.cnblogs.com/Sultan-ST/p/16866668.html

相关文章

  • 【每日一练】26—CSS实现响应式卡片悬停效果
    今天练习的这个小项目,是一个产品卡片式的介绍说明,像我们在一些个人简历产品说明里或者产品说明里会经常使用这样的内容设计,然后再配上合适的图片即可。例如,我们在个人简历上......
  • 【每日一练】19—CSS 实现撕纸的效果
    写在前面今天我们来练习一个CSS实现的撕纸效果,这个效果,也会在一些设计网站上经常看到,但是这个用PS可以直接做成一张图片,但是,今天我们用CSS通过两张图片就实现了,这样做的好处......
  • 【每日一练】20—CSS实现文字动画效果
    写在前面今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习。今天练习的这个小项目是一个CSS实现的文......
  • 【每日一练】21—CSS实现炫酷动画背景
    今天分享的这个小练习,我们在视频号上分享过,具体效果请看下面的视频:因为在视频号的后台,有小伙伴留言说,想要这个案例的源码,所以,今天就把这个源码也分享出来了,有兴趣的小伙伴可......
  • HTML,CSS,JavaScript的介绍
    网页组成:HTML,CSS,JavaScript:Html相当于骨架,Css相当于皮肤,JavaScript相当于肌肉三者结合起来形成完善的网页HTML超文本标记语言(hypertextmarkuplanguage)决定网......
  • css通用效果代码
    1.小米的hover上移效果&:hover{-webkit-box-shadow:015px30pxrgba(0,0,0,.1);box-shadow:015px30pxrgba(0,0,0,.1)......
  • CSS混合渐变
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......
  • css 设置input选中后样式
    .i_input{border:#00b5c31pxsolid;}.i_input:focus{outline:none;border:1pxsolidred;}<inputtype="text"placeholder="输入你真实的姓名"class="i_input">js-......
  • css3 新增的特性有哪些?
    css3选择器。css3边框(borders)css3背景css3渐变css3文本效果css3字体(@font-size规则)css3转化和变形1)2D转换方法2)3D转换属性css3过渡(transition属性)css3......
  • CSS布局秘籍(1)-任督二脉BFC/IFC
    01、CSS布局1.1、正常布局流(Normalflow)正常布局流就是不做任何布局控制,按照HTML的顺序(从左到右,从上而下)进行布局排列。网页基于盒子模型进行正常的布局,主要特点:盒......