css字体溢出怎么隐藏


本文摘自PHP中文网,作者青灯夜游,侵删。

css中可以利用overflow属性来实现字体溢出隐藏效果,只需要给包裹字体的标签元素添加“overflow: hiddden;”样式即可。overflow属性用于控制内容溢出元素框时发生的事情,当值设置为“hidden”时溢出部分不可见。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css中,可以利用overflow属性来实现字体溢出隐藏效果。

下面通过代码示例来介绍一下overflow属性如何实现字体溢出隐藏

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#overflowTest {

    background: #4CAF50;

    color: white;

    width: 80%;

    height: 140px;

    overflow: hidden;

    border: 1px solid #ccc;

}

</style>

</head>

<body>

 

<div id="overflowTest">

<p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>

<p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>

<p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>

<p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>

<p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>

<p>这里的文本内容是可以滚动的,滚动条方向是垂直方向。</p>

</div>

 

</body>

</html>

效果图:

1.png

overflow属性用于控制内容溢出元素框时发生的事情,当值设置为“hidden”时,内容会被修剪,并且其余内容是不可见的,即溢出部分会被隐藏。

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

(学习视频分享:css视频教程)

以上就是css字体溢出怎么隐藏的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css两个冒号什么意思

css如何设置相邻单元格边框之间的距离

css如何设置自动换行

jq如何设置css

jq如何判断css是否存在

css定位有哪些

详解纯css实现多彩、智能阴影的方法

css中实现背景透明的三种方式

css3实现微信小程序瀑布流布局的代码示例

css如何隐藏标签

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...