CSS基本使用总结

文章目录

• 文字水平居中和垂直居中
• 如何设置a标签不带下划线
• 控件右对齐
• div上下居中
• 控件左右居中
• 控件展示在同一行
• 设置文字超出部分...显示

CSS 样式笔记

文字水平居中和垂直居中

• 水平居中：在该文字的div设置：text-align: center;
• 垂直居中：在该文字的div设置：line-height: 60px; 其中60px为该div的高度

如何设置a标签不带下划线

a {
  text-decoration: none;
}

控件右对齐

float: right;

div上下居中

height: 50px;
line-height: 50px

设置line-height的值和div的高一致

控件左右居中

margin: 0 auto;

控件展示在同一行

display: inline-block

设置文字超出部分…显示

多行文本

p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 可以显示的行数，超出部分用...表示*/
    -webkit-box-orient: vertical;
}

单行文本

div1{
   overflow: hidden;    
 	text-overflow: ellipsis;    //超出部分以省略号显示
 	white-space: nowrap;
 	width: 20em;    //用px单位亦可行
 }

来源：CSDN

作者：洛水之风

链接：https://blog.csdn.net/weixin_43988672/article/details/103949212