- `ellipsis`：显示省略符号代表修剪内容。- `string`：使用指定字符串代表修剪文本。`white-space属性`则决定元素内空白处理方式，`normal`默认忽略空白，`pre`保留空白，行为类似HTML中的`pre`标签。选择器复习涉及CSS规则与属性选择，例如：- `.title.block`选择同时拥有`title`与`block`类的元素。-...
css实现多行省略号和选择器复习
实现多行省略与复习选择器主要涉及CSS样式属性与预处理器如LESS的使用。
自动换行处理方法由`work-break属性`控制，其值包括：
- `normal`：遵循浏览器默认规则换行。
- `break-all`：允许在单词内部换行，打破常规换行规则。
- `keep-all`：仅在半角空格或连字符处换行。
文本溢出时处理方法通过`text-overflow属性`设定，包含：
- `clip`：修剪文本。
- `ellipsis`：显示省略符号代表修剪内容。
- `string`：使用指定字符串代表修剪文本。
`white-space属性`则决定元素内空白处理方式，`normal`默认忽略空白，`pre`保留空白，行为类似HTML中的`pre`标签。
选择器复习涉及CSS规则与属性选择，例如：
- `.title.block`选择同时拥有`title`与`block`类的元素。
- `.block .paragraph`选择`title`类下的所有`paragraph`类元素。
- `.paragraph,.footer`选择所有`paragraph`与`footer`类元素。
- `h1 + p`选择`h1`与`p`是相邻兄弟的`p`元素。
- `div > p`选择`div`下的所有`p`元素。
- `p:first-child`选择容器中必须为第一个元素的`p`元素。
- `p:first-of-type`选择容器中排在最前面的`p`元素。
- `p:last-of-type`选择容器中排在最后面的`p`元素。
- `p:last-child`选择容器中必须为最后一个元素的`p`元素。
- `p:only-of-type`选择`p`元素是其父级的唯一`p`元素。
- `p:only-child`选择`p`元素是其父级的唯一子元素。
- `p:nth-child(2)`选择容器中的第二个`p`元素。
- `p:nth-last-child(2)`选择容器中的倒数第二个`p`元素。
- `p:nth-of-type(2)`选择容器中的第二个`p`元素。
- `p:nth-last-of-type(2)`选择容器中的倒数第二个`p`元素。2024-08-16
