【响应式Web设计】读书笔记 - CSS（一） - 8

【简介】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 。

欢迎大家关注我的新浪微博 - 一点编程，了解最新动态 。