css省略号

高艳艳0216

已于 2024-01-22 18:54:22 修改

阅读量357

点赞数 10

文章标签： css 前端 html

于 2023-12-31 14:26:37 首次发布

本文链接：https://blog.csdn.net/explore02161218/article/details/135315866

版权

本文介绍了CSS技术中如何处理文本溢出显示省略号、元素的圆角效果、鼠标光标设置、背景图缩放、行内元素对齐以及使用弹性盒子实现换行布局。此外，还讨论了表格边框合并和图标引入的最佳实践。

摘要由CSDN通过智能技术生成

溢出省略号:需要两个步骤

orders li .goods .txt{
    flex: 1;
    /*溢出的时候显示省略号*/
    /*因为弹性盒子的尺寸可以被内容撑开，不换行的文字可以撑开这个盒子的尺寸*/
    width: 0;
}

.orders li .goods .txt h4 {
    text-overflow: ellipsis;
    white-space: nowrap; /*这个是不允许换行，注意：现在这些东西都是在弹性盒子中，不允许换行，他就会撑开*/
    overflow: hidden;/*所以就不会有溢出的现象*/
    -webkit-line-clamp: 2;//这个表示2行溢出省略号
}

变成圆形（前提要有宽和高）

border-radius: 50%;

光标变为手指

  cursor: pointer;

背景图缩放

background-size: contain;//背景图大，所以要缩放

基线影响，行内图片和字对齐

 vertical-align: middle;//行内图和字对齐

flex为弹性盒子，即使固定了宽和高，内容多了也会撑开盒子，要想换行排列，需要加此属性（默认值是：`flex-wrap: nowrap`）

flex-wrap: wrap;

表格合并左右相邻的边框

table {
	border-collapse: collapse;/* 合并相邻边框*/
		}

注意：加边框是给`table` 中的`th,td`加

引入icon ,图片需要放在根目录下

<link rel="shortcut icon" href="./favicon.ico">