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）属性一起使用。