CSS布局--overflow

一、overflow

1. overflow 属性用于控制内容溢出元素框时显示的方式。

2. overflow有五种属性值：

visible : 默认值，内容不会被修剪，会超出元素框显示。
hidden : 内容会被修剪，超出元素框的部分会被隐藏。
scroll : 内容会被修剪，但浏览器会显示滚动条以查看其余内容。
auto : 如果内容被修剪，浏览器就会显示滚动条以查看其余内容。
inherit : 从父元素继承overflow的值。

3. 注意:overflow 属性只工作于指定高度的块元素上。

4. 使用visible 属性：

<template>
    <div class="content">
        今天是个好日子，空气良好，建议适当开展户外活动。
    </div>
</template>
<script>

</script>
<style lang="less" scoped>
.content {
width: 200px;
height: 30px;
color: rgb(221, 24, 24);
background-color:rgb(108, 144, 243) ;
overflow: visible;
}
</style>

5. 使用hidden属性：

<template>
    <div class="content">
        今天是个好日子，空气良好，建议适当开展户外活动。
    </div>
</template>
<script>

</script>
<style lang="less" scoped>
.content {
width: 200px;
height: 30px;
color: rgb(221, 24, 24);
background-color:rgb(108, 144, 243) ;
overflow: hidden ;
}
</style>

6. 使用scroll属性：

<template>
    <div class="content">
        今天是个好日子，空气良好，建议适当开展户外活动。
    </div>
</template>
<script>

</script>
<style lang="less" scoped>
.content {
width: 200px;
height: 50px;
color: rgb(221, 24, 24);
background-color:rgb(108, 144, 243) ;
overflow: scroll  ;
}
</style>

二、text-overflow

1. 规定当文本溢出包含元素时发生的事情。

2. text-overflow有三个属性值:

clip : 裁剪文本
ellipsis : 使用省略号代表被修剪的文本
string : 使用特定字符串代表被修剪的文本

3. 常用 ellipsis，举例：

<template>
    <div class="content">
        今天是个好日子，空气良好，建议适当开展户外活动。
    </div>
</template>
<script>

</script>
<style lang="less" scoped>
.content {
width: 300px;
height: 30px;
color: rgb(221, 24, 24);
background-color:rgb(108, 144, 243) ;
overflow: hidden;
text-overflow: ellipsis  ;
white-space: nowrap;/* 强制文本在同一行表示 */
}
</style>

4. text-overflow常与（word-wrap）属性和空白符（white-space）属性一起使用。

一、overflow

二、text-overflow

猜你喜欢