CSS笔记

Posted 2021-10-08 差五分姑娘

处理长短内容

长内容

overflow-wrap

用来说明当一个不能被分开的字符串太长而不能填充器包裹盒时，防止溢出，浏览器是否允许单词中断换行。

硬换行：在文本的换行点插入了实际换行符
软换行：文本实际上仍在同一行，但看起来被分成了几行。word-break-all:break-all让长英文单词属于软换行~~~~

overflow-wrap属性是word-wrap属性，
参数：normal | break-word | anywhere
normal:只在允许的断字点换行(浏览器保持默认处理)
break-word:在长单词或URL地址内部进行换行，不用考虑单词的完整性。
anywhere:

anywhere和break-word的异同

在正常状态下， anywhere 和 break-word 的表现是一样的，即如果行中没有其他可接受的断点，则可以在任何点断开原本不可断开的字符串（如长单词或URL），并且在断点处不插入连字符。（连续的英文字符如果可以不用断就不断，如果实在不行，就断开，因此相比break-all可能会留白。）

anywhere 和 break-word 的不同之处

在 overflow-wrap:anywhere 计算最小内容尺寸的时候会考虑软换行，而 overflow-wrap:break-word 不会考虑软换行。

Hyphens

用来告知浏览器在华航是如何使用连字符连接单词，可以完全阻止使用连字符串，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。

.element{
    hyphens:auto;
}

文本截断处理

截断是指在句子的末尾添加点，以表明有更多的文本内容。

.element{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

多行文本截断处理

如果要截断多个行，可以使用line-clamp属性。

.element{
    display:-webkit-box;
    -webit-line-clamp:3;  //指定截断~~~~的最大行数
    -webkit-box-orient:vertical;
    overflow:hidden;
}

如果为元素添加padding,容易失败，导致显示下一行的一部分(应该被截断)

水平滚动

截断或连接一个单词，使代码折行显示，达不到想要的效果

overflow-wrap:break-word;  

overflow-x:auto;  //水平滚动

---

短内容

设置一个最小宽度

min-width

用例和示例

个人资料卡

/* 1*/
.element{
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;~~~~
}
/* 2*/
.element{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

导航项

在处理多语言布局时，内容长度会发生变化。最好为导航项设置最小宽度。

文章内容

长单词或者链接在溢出导致水平滚动后，可以使用goverflow-wrap或者hyphens

---

补充内容

width属性

参数：

• fill-available 自动填满剩余空间，
  在div没有任何样式的时候，浏览器是赞找自动填充的样式呈现的，就是100%width的样式填充的。
• max-content和min-content是会跟随有定宽的最大最小宽度，不会进行收缩。
• fit-content,可以实现元素收缩效果同时，保持原本的block水平状态，于是就可以使用margin:auto实现元素向内自适应同时的居中效果了。

本文只作为学习记录。