1. overflow:visible;作用：能看到溢出部分。
  2. overflow: hidden;作用：溢出部分看不到
  3. overflow:scroll; 作用：出现一个滚动条（不超过的文字也会在滚动条里）
  4. overflow:auto;作用：自动滚动条

下面的代码可以对这4个属性区别显示效果

<!DOCTYPE html>
<html>
<head>
<title>溢出</title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 500px;
height: 180px;
border: 1px solid red;

}

#aa{
overflow: visible;

}
#bb{
overflow: hidden;
}
#cc{
overflow: scroll;
}
#dd{
overflow: auto;
}
.qq{
overflow: auto;
}
</style>
</head>
<body>
<div id="aa">　也许爱的往事是永远也不能忘记得，我记得最后几次的相遇和美丽的邂逅，让我永远不能忘。那是一个惺忪的夜晚，屋里就有你和我。此时外面还下着鹅毛般的大雨，还不停有雷声交杂着，就在半夜时分，那雷声一次比一次大，我和你谁也没有睡着，此时的心里都在想着对方，谁也不敢冲破那道墙。那雷声越来越大，你此时蜷缩在被窝里不敢睡，就在一个最大的雷声响起时，你一下抱着被跑到我的房间里，要和我一起睡，我一下被惊呆了，一下从床上起来，说道：“你这样不行，我们不能那样。”你看了看我，说道：“你没有听到雷声吗，人家好怕，才到你这。”你这么一说，我也没有啥好说的了，就允许你躺在我的怀里，那夜我是抱着你，坐着睡着的。

　　这夜许就是最后一次美丽的邂逅，再后来，就也再也见不到你了，因为你家居住在外地，就再也没有联系，彼此也没有留下任何号码，你就象从人间蒸发了似的，这就是我的牵挂。</div><br>
<div id="bb">　也许爱的往事是永远也不能忘记得，我记得最后几次的相遇和美丽的邂逅，让我永远不能忘。那是一个惺忪的夜晚，屋里就有你和我。此时外面还下着鹅毛般的大雨，还不停有雷声交杂着，就在半夜时分，那雷声一次比一次大，我和你谁也没有睡着，此时的心里都在想着对方，谁也不敢冲破那道墙。那雷声越来越大，你此时蜷缩在被窝里不敢睡，就在一个最大的雷声响起时，你一下抱着被跑到我的房间里，要和我一起睡，我一下被惊呆了，一下从床上起来，说道：“你这样不行，我们不能那样。”你看了看我，说道：“你没有听到雷声吗，人家好怕，才到你这。”你这么一说，我也没有啥好说的了，就允许你躺在我的怀里，那夜我是抱着你，坐着睡着的。

　　这夜许就是最后一次美丽的邂逅，再后来，就也再也见不到你了，因为你家居住在外地，就再也没有联系，彼此也没有留下任何号码，你就象从人间蒸发了似的，这就是我的牵挂。</div ><br>
<hr width="100%" size="10px" color="red">
<div id="cc">　也许爱的往事是永远也不能忘记得，我记得最后几次的相遇和美丽的邂逅，让我永远不能忘。那是一个惺忪的夜晚，屋里就有你和我。此时外面还下着鹅毛般的大雨，还不停有雷声交杂着，就在半夜时分，那雷声一次比一次大，我和你谁也没有睡着，此时的心里都在想着对方，谁也不敢冲破那道墙。那雷声越来越大，你此时蜷缩在被窝里不敢睡，就在一个最大的雷声响起时，你一下抱着被跑到我的房间里，要和我一起睡，我一下被惊呆了，一下从床上起来，说道：“你这样不行，我们不能那样。”你看了看我，说道：“你没有听到雷声吗，人家好怕，才到你这。”你这么一说，我也没有啥好说的了，就允许你躺在我的怀里，那夜我是抱着你，坐着睡着的。

　　这夜许就是最后一次美丽的邂逅，再后来，就也再也见不到你了，因为你家居住在外地，就再也没有联系，彼此也没有留下任何号码，你就象从人间蒸发了似的，这就是我的牵挂。</div><br>
<div id="dd">　<p class="qq">的心里都在想着对方，谁也不敢冲破那道墙。那雷声越来越大，你此时蜷缩在被窝里不敢睡，就在一个最大的雷声响起时，你一下抱着被跑到我的房间里，要和我一起睡，我一下被惊呆了，一下从床上起来，说道：“你这样不行，我们不能那样。”你看了看我，说道：“你没有听到雷声吗，人家好怕，也许爱的往事是永远也不能忘记得，我记得最后几次的相遇和美丽的邂逅，让我永远不能忘。那是一个惺忪的夜晚，屋里就有你和我。此时外面还下着鹅毛般的大雨，还不停有雷声交杂着，就在半夜时分，那雷声一次比一次大，我和你谁也没有睡着，此时的心里都在想着对方，谁也不敢冲破那道墙。那雷声越来越大，你此时蜷缩在被窝里不敢睡，就在一个最大的雷声响起时，你一下抱着被跑到我的房间里，要和我一起睡，我一下被惊呆了，一下从床上起来，说道：“你这样不行，我们不能那样。”你看了看我，说道：“你没有听到雷声吗，人家好怕，才到你这。”你这么一说，我也没有啥好说的了，就允许你躺在我的怀里，那夜我是抱着你，坐着睡着的</p>。那是一个惺忪的夜晚，屋里就有你和我。此时外面还下着鹅毛般的大雨，还不停有雷声交杂着，就在半夜时分，那雷声一次比一次大，我和你谁也没有睡着，此时的心里都在想着对方，谁也不敢冲破那道墙。那雷声越来越大，你此时蜷缩在被窝里不敢睡，就在一个最大的雷声响起时，你一下抱着被跑到我的房间里，要和我一起睡，我一下被惊呆了，一下从床上起来，说道：“你这样不行，我们不能那样。”你看了看我，说道：“你没有听到雷声吗，人家好怕，也许爱的往事是永远也不能忘记得，我记得最后几次的相遇和美丽的邂逅，让我永远不能忘。那是一个惺忪的夜晚，屋里就有你和我。此时外面还下着鹅毛般的大雨，还不停有雷声交杂着，就在半夜时分，那雷声一次比一次大，我和你谁也没有睡着，此时的心里都在想着对方，谁也不敢冲破那道墙。那雷声越来越大，你此时蜷缩在被窝里不敢睡，就在一个最大的雷声响起时，你一下抱着被跑到我的房间里，要和我一起睡，我一下被惊呆了，一下从床上起来，说道：“你这样不行，我们不能那样。”你看了看我，说道：“你没有听到雷声吗，人家好怕，才到你这。”你这么一说，我也没有啥好说的了，就允许你躺在我的怀里，那夜我是抱着你，坐着睡着的。

　　这夜许就是最后一次美丽的邂逅，再后来，就也再也见不到你了，因为你家居住在外地，就再也没有联系，彼此也没有留下任何号码，你就象从人间蒸发了似的，这就是我的牵挂。</div>
</body>
</html>

得出结果如下图：

html 文字溢出标签的更多相关文章

  1. CSS清除浮动&内容居中&文字溢出

    学习! 1.CSS清除浮动的方法 (1)添加标签清除浮动: 在浮动元素结尾处,并列的添加标签<div style="clear:both;"></div>. ...

  2. td文字溢出显示省略号

    昨天遇到移动端表格td中文字溢出问题,写了溢出隐藏样式,居然没起作用! { overflow:hidden;//溢出隐藏 white-space:nowrap;//文字不换行 text-overflo ...

  3. CSS 文本和表格中文字溢出显示省略号

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  4. jquery文字溢出处理，超出变省略号

    //文字溢出 $(function(){ $(".d_dt a").each(function(){ var maxwidth =100; if($(this).text().le ...

  5. css+div如何解决文字溢出

    看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...

  6. IE6文字溢出BUG(多出来的猪问题)

    在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来. 看个例子: HTML & ...

  7. CSS 文字溢出时的自动隐藏

    http://www.111cn.net/cssdiv/css/34050.htm 语法:overflow : visible | auto | hidden | scroll visible::不剪 ...

  8. 【IE6的疯狂之四】IE6文字溢出BUG

    在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来. 看个例子: XML/HT ...

  9. CSS文字溢出处理问题

    单行省略 div { white-space:nowrap; //断行处理:无断行 text-overflow:ellipsis; //文字溢出处理:省略号 overflow:hidden; //溢出 ...

随机推荐

  1. Mac系统配置多个git账号

    1.进入ssh目录 #cd ~/.ssh/ 2.用ssh-keygen命令生成一组新的id_rsa_new和id_rsa_new.pub #ssh-keygen -t rsa -C"new ...

  2. Swift - 38 - 枚举的基本语法

    //: Playground - noun: a place where people can play import UIKit // 创建一个枚举类型就相当于创建了一个新的数据类型, 所以首字母应 ...

  3. 武汉科技大学ACM：1001: 谁不爱打牌

    Problem Description BobLee最近在复习考研,但是他也喜欢打牌(有谁不爱玩牌呢?).但是作为一名ACMER,斗地主显然满足不了他的兴趣,于是他和YYD一起YY出来了一个游戏规则, ...

  4. A Bug's Life(hdu1829种类并查集)

    题意:有一群虫子,现在给你一些关系,判断这些关心有没有错 思路:向量种类并查集,下面讲一下向量的种类并查集 本题的各个集合的关心有两种0同性,1异性,怎么判断有错, 1.先判断他们是否在一个集合,即父 ...

  5. Python自动化运维之10、模块之json、pickle、XML、PyYAML、configparser、shutil

    序列化 Python中用于序列化的两个模块 json     用于[字符串]和 [python基本数据类型] 间进行转换 pickle   用于[python特有的类型] 和 [python基本数据类 ...

  6. 怎么看时序图--nand flash的读操作详解（转载）

    出处:http://blog.chinaunix.net/uid-28852942-id-3992727.html这篇文章不是介绍 nand flash的物理结构和关于nand flash的一些基本知 ...

  7. Windows下的SVN环境搭建详解

    前言:最近因为要和其他人合作开发项目,所以花时间搭建了SVN的环境. 因为是初次使用SVN,对于SVN的环境搭建很不熟悉,再加上网上的教程都介绍的比较粗略,导致前前后后重做了几次. 当然最终是搭建成功 ...

  8. notes: the architecture of GDB

    1. gdb structure at the largest scale,GDB can be said to have two sides to it:1. The "symbol si ...

  9. RAILS ON

    我是按照下面这个URL来轻快安装的. http://lxiaodao.iteye.com/blog/1579992 (1)RVM官方网站应该是改版过一次, 使用 curl -L https://get ...

  10. Android listview局部刷新和模拟应用下载(zhu)

    在android开发中,listview是比较常用的一个组件,在listview的数据需要更新的时候,一般会用notifyDataSetChanged()这个函数,但是它会更新listview中所有可 ...