【简介】CSS 响应式多列布局、截断文本、CSS 属性选择符
1. CSS 响应式多列布局
对于一段长文本,可以直接通过 CSS 属性来让文本分成多列显示,所使用的 CSS 属性为:
- column-width:设定列宽(列数可变)。
- column-count:设定列数(列宽可变)。
- column-gap:设定列与列之间的间距。
- column-rule:在列与列之间添加分割线。
1.1 列宽固定,设置列数
在 1365px 宽度的 PC 屏幕上:
在 768px 宽度的 平板上:
其中 HTML 部分:
<main>
<p>很多的文本内容。</p>
</main>
CSS 部分:
.main {
column-width: 12em;
}
1.2 固定列数,可变列宽
其中 HTML 部分与 1.1 保持变,CSS做如下改变:
.main {
column-count: 4;
}
1.3 为文本添加列间距和分割线
其中 HTML 部分与 1.1 保持变,CSS做如下改变:
.main {
column-width: 12em;
column-gap: 2em;
column-rule: 1px dotted #999;
}
2. 截断文本
其中 HTML 部分:
<p class="truncate">This is some long text that will not fit in the box</p>
CSS 部分:
.truncate {
width: 220px;
border: 1px solid #ccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
3. CSS 属性选择符
CSS 属性选择符主要有以下几种情况:
- 属性名匹配;
- 属性名和属性值同时匹配;
- 属性值以······开头;
- 属性值包含······;
- 属性值以······结尾。
3.1 属性名匹配
元素的属性可以作为 CSS 选择器,例如 HTML 片段为:
<p title="apple milk water">apple milk water</p>
<p title="apple milk">apple milk</p>
<p>no title</p>
则可以使用 title
属性,选中前面两个<p>
标签,例如 CSS 样式为:
[title] {
font-size: 22px;
}
则可以使前面两个 <p>
元素中的字体大小变为 22px 。
3.2 属性名和属性值同时匹配
HTML 片段保持不变, CSS 样式改为:
[title="apple milk"] {
font-size: 22px;
}
则此时选择器选中第二个 <p>
元素中的字体大小变为 22px 。
3.3 属性值以······开头
HTML 片段为:
<p title="apple milk water">apple milk water</p>
<p title="apple milk">apple milk</p>
<p title="milk">milk</p>
<p>no title</p>
CSS 样式为:
[title^="apple"] {
font-size: 22px;
}
则会选择 title 属性以 apple 的属性值开头的元素,即前面两个元素为 22px 。
3.4 属性值包含······
HTML 片段保持不变,CSS 样式改为:
[title*="milk"] {
font-size: 22px;
}
因为前面三个 <p>
元素中均包含「milk」属性值,所以字体大小变为 22px 。
3.5 属性值以······结尾
HTML 片段保持不变,CSS 样式改为:
[title$="milk"] {
font-size: 22px;
}
以「milk」属性值结尾的有第二个和第三个元素,这两个元素字体大小变为 22px 。
欢迎大家关注我的新浪微博 - 一点编程,了解最新动态 。