CSS 04篇——关于position、overflow、text-overflow、-webkit-line-clamp等属性的使用（包括CSS元素内容溢出处理等）

1. 前言——CSS其他
2. 关于float属性
3. 关于position属性
- 3.1 position属性简介
- 3.2 简单例子
- - 3.2.1 fixed使用
  - 3.2.2 relative + absolute
5. 关于元素溢出和内容限制行数
- 5.1 关于overflow
- - 5.1.1 先简单介绍CSS的简写属性
  - 5.1.2 简单介绍overflow
  - 5.1.3 overflow常见属性值及效果
- 5.2 关于white-space
- 5.3 关于text-overflow
- - 5.3.1 简单介绍text-overflow
  - 5.3.2 简单应用text-overflow（搭配white-space 与 overflow）
- 5.4 关于-webkit-line-clamp
- 5.5 关于内容溢出的例子
- - 5.5.1 给div加滚动条（overflow属性——overflow的应用）
  - 5.5.2 控制块级元素内容显示（overflow + text-overflow + white-space）
  - 5.5.3 控制table中td文字溢出显示字数（overflow + text-overflow）
  - 5.5.4 控制行内元素内容溢出显示“…“（使用-webkit-line-clamp）
6. 关于display属性
- 6.1 更多参考
- 6.2 例子1——div成为行内
- 6.3 例子2——横排div高度不一致

1. 前言——CSS其他

关于CSS的上几篇文章，如下：
- 关于CSS的几种字体悬浮的设置方法.
- CSS解决div行变块 ➕ CSS解决“table中的td文字溢出控制显示字数，显示省略号”的问题.
- CSS画圆以及CSS实现动态圆.

2. 关于float属性

float CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）。

简单使用，如下：

<style>
    .div_float{
        background-color: green;
        width: 150px;
        height: 150px;
        float: right;
    }
</style>

关于float更多内容请看：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/float.

3. 关于position属性

3.1 position属性简介

position属性有：
- fixed：用于生成固定定位的元素，相对于浏览器窗口进行定位。
- relative：用于生成相对定位的元素，相对于其正常位置进行定位。
- absolute：用于生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
- static：默认值，不进行定位，元素出现在正常的流中。
- sticky：用于进行粘性定位，该定位基于用户滚动的位置。

3.2 简单例子

3.2.1 fixed使用

代码如下：

.div_position_1{
    background-color: gray;
    width: 200px;
    height: 200px;

    right: 20px;
    position: fixed;
}

效果如下：

3.2.2 relative + absolute

代码如下：

.span_position{
    position: relative;
}
.number_position{
    position: absolute;
    top: -10px;
}

<div>
    <span class="span_position">
        关注
        <i class="number_position">521</i>
    </span>
</div>

效果如下：

5. 关于元素溢出和内容限制行数

5.1 关于overflow

5.1.1 先简单介绍CSS的简写属性

简写属性是可以让你同时设置好几个 CSS 属性值的 CSS 属性。使用简写属性，Web 开发人员可以编写更简洁、更具可读性的样式表，节省时间和精力。
CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。比如 CSS 的 background 属性就是一个简写属性，它可以定义 background-color、background-image、background-repeat 和 background-position 的值。类似地，最常见的字体相关的属性可以使用 font 的简写，盒子（box）各方向的外边距（margin）可以使用 margin 这个简写。
更多参考，请去：
CSS 的简写属性.

5.1.2 简单介绍overflow

overflow 是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。
构成的属性：
overflow属性是：overflow-x 与 overflow-y 的简写。

5.1.3 overflow常见属性值及效果

常见的属性值：
- visible
  - 内容不能被裁减并且可能渲染到边距盒（padding）的外部。
  - 代码及效果如下：
```
.div_visible{
    width: 200px;
    height: 200px;
    border: 3px dotted red;
    
    overflow: visible;
}
```
- hidden
  - 如果需要，内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。
  - 代码及效果如下：
```
<style>
    .div_hidden{
        width: 240px;
        height: 200px;
        border: 3px dotted red;

        overflow: hidden;
    }
</style>
```
- clip
  - 类似于 hidden，内容将以元素的边距（padding）盒进行裁剪。clip 和 hidden 之间的区别是 clip 关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。如果你希望开启一个新的格式化上下文，你可以使用 display: flow-root 来这样做。
  - 效果与hidden一样，这里就不再演示了。
- scroll
  - 使用该值会出现滚动条：
    如果需要，内容将被裁减以适应边距（padding）盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。
  - 如下：
```
.div_scroll{
    width: 220px;
    height: 200px;
    border: 3px dotted red;

    overflow: scroll;
}
```
- auto
  - 如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。
  - 如下：
```
overflow: auto;
```
- overlay（已弃用）
  *
  - 如下：
```
overflow: overlay;
```
更多请参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow.

5.2 关于white-space

white-space 属性用于设置如何处理元素内的空白字符。
这个属性指定了两件事：
- 空白字符是否合并，以及如何合并。
- 是否换行，以及如何换行。

常用的值

normal
- 连续的空白符会被合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。

nowrap（阻止换行）

和 normal 一样合并空白符，但阻止源码中的文本换行。
使用效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .div_1 p{
            width: 100px;
            border: 1px solid;

			/* 阻止换行 */
            white-space: nowrap;
        }

        .div_2 p{
            width: 100px;
            border: 1px solid;
        }
    </style>

</head>
<body>
    
    <div class="div_1">
        <p>
            我要使用ellipsis，使用了吗？啊啊啊啊啊
        </p>
    </div>

    <div class="div_2">
        <p>
            我要使用ellipsis，使用了吗？啊啊啊啊啊
        </p>
    </div>

</body>
</html>

更多参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space.

5.3 关于text-overflow

5.3.1 简单介绍text-overflow

text-overflow CSS 属性用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串。
注意：
- text-overflow 属性并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，你需要在元素上添加几个额外的属性：overflow 和 white-space。
- text-overflow 属性只对那些在块级元素溢出的内容有效，但是必须要与块级元素内联（inline）方向一致（举个反例：文本无法在盒子的下方溢出）。
常见的属性值：
- clip
  默认值。这个关键字会在内容区域的极限处截断文本，因此可能会在单词的中间发生截断。如果你的目标浏览器支持 text-overflow: ‘’，为了能在两个单词过渡处截断，你可以使用一个空字符串值（‘’）作为 text-overflow 属性的值。
- ellipsis
  这个关键字会用一个省略号（‘…’、U+2026 HORIZONTAL ELLIPSIS）来表示被截断的文本。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小以至于连省略号都容纳不下，那么这个省略号也会被截断。

5.3.2 简单应用text-overflow（搭配white-space 与 overflow）

代码如下：

<style>
    p{
        width: 100px;
        border: 1px solid;
        /* 
            1. white-space: nowrap   阻止换行
            2. overflow: hidden    溢出被裁减
        */
        white-space: nowrap;
        overflow: hidden;
    }
    
    .overflow-ellipsis {
        /* 截断之后显示省略号 */
        text-overflow: ellipsis;
    }
</style>

<div>
    <p class="overflow-ellipsis">
        我要使用ellipsis，使用了吗？啊啊啊啊啊
    </p>
</div>

效果如下：

5.4 关于-webkit-line-clamp

-webkit-line-clamp 属性可以把块容器中的内容限制为指定的行数。
注意：
- -webkit-line-clamp 属性只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box并且 box-orient 属性设置成 vertical时才有效果。
- 在大部分情况下，也需要设置 overflow 属性为 hidden，否则，里面的内容不会被裁减，并且在内容显示为指定行数后还会显示省略号。
关于值：
- none
  这个值表明内容显示不会被限制。
- <integer>
  这个值表明内容显示了多少行之后会被限制。必须大于 0。

5.5 关于内容溢出的例子

5.5.1 给div加滚动条（overflow属性——overflow的应用）

设置div的overflow属性，你可以设置成auto（水平和垂直都有），也可以单独设置overflow-x（水平滚动条），也可以单独设置overflow-y（垂直滚动条），例子如下：

<style>
    .div1{
        background-color: gray;
        width: 200px;
        height: 200px;
        
        overflow: auto;
        /* overflow-y: auto; */
        /* overflow-x: auto; */
    }
</style>

5.5.2 控制块级元素内容显示（overflow + text-overflow + white-space）

以控制标签内容显示为例，详情见上面的例子：5.3.2 简单应用text-overflow（搭配white-space 与 overflow）。

5.5.3 控制table中td文字溢出显示字数（overflow + text-overflow）

下面文章有写，如下：
CSS解决“table中的td文字溢出控制显示字数，显示省略号”的问题.

5.5.4 控制行内元素内容溢出显示“…“（使用-webkit-line-clamp）

代码如下：

<style>
    .data_div{
        background-color: gray;
        width: 200px;
        border-radius: 10px;
    }

    .data_div a{
        /* 不需要设置 text-overflow，因为设置 -webkit-line-clamp 之后，自动会显示省略号 */
        /* text-overflow: ellipsis; */

        overflow: hidden;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
</style>

<body>
    <div class="data_div">
        <ul>
            <li>
                <a>狗狗麦兜活泼可爱又粘人</a>
            </li>
            <li>
                <a>狗狗贝塔温柔粘人且胆小</a>
            </li>
            <li>
                <a>狗狗泡泡爱打呼</a>
            </li>
            <li>
                <a>狗狗可乐耍脾气一流</a>
            </li>
            <li>
                <a>猫咪点点在愉快的玩他的漂亮的小鱼工具</a>
            </li>
        </ul>
    </div>
</body>

效果如下：

6. 关于display属性

6.1 更多参考

下面就简单介绍两个例子，关于该属性的更多介绍，请看：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/display.

6.2 例子1——div成为行内

如下：
```
display: inline-block;
```

6.3 例子2——横排div高度不一致

问题如下：
解决如下：
```
vertical-align: middle; 
```

CSS 04篇——关于position、overflow、text-overflow、-webkit-line-clamp等属性的使用（包括CSS元素内容溢出处理等）

CSS 04篇——关于position、overflow、text-overflow、-webkit-line-clamp等属性的使用（包括CSS元素内容溢出处理等）

1. 前言——CSS其他

2. 关于float属性

3. 关于position属性

3.1 position属性简介

3.2 简单例子

3.2.1 fixed使用

3.2.2 relative + absolute

5. 关于元素溢出 和 内容限制行数

5.1 关于overflow

5.1.1 先简单介绍CSS的简写属性

5.1.2 简单介绍overflow

5.1.3 overflow常见属性值及效果

5.2 关于white-space

5.3 关于text-overflow

5.3.1 简单介绍text-overflow

5.3.2 简单应用text-overflow（搭配white-space 与 overflow）

5.4 关于-webkit-line-clamp

5.5 关于内容溢出的例子

5.5.1 给div加滚动条（overflow属性——overflow的应用）

5.5.2 控制 块级元素 内容显示（overflow + text-overflow + white-space）

5.5.3 控制table中td文字溢出显示字数（overflow + text-overflow）

5.5.4 控制行内元素内容溢出显示“…“（使用-webkit-line-clamp）

6. 关于display属性

6.1 更多参考

6.2 例子1——div成为行内

6.3 例子2——横排div高度不一致

5. 关于元素溢出和内容限制行数

5.5.2 控制块级元素内容显示（overflow + text-overflow + white-space）