展会信息港展会大全

CSS 文字溢出时的自动隐藏
来源:互联网   发布日期:2016-03-25 16:31:46   浏览:2363次  

导读:实现此方法非常的简单,只要设置div的overflo为hidden的同时固定宽度就可以实现了,下面来看一个例子。语法:overflow : visible | auto | hidden |...

实现此方法非常的简单,只要设置div的overflo为hidden的同时固定宽度就可以实现了,下面来看一个例子。

语法:overflow : visible | auto | hidden | scroll

visible::不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大校并且clip属性设置将失效。

auto:此为body对象和textrea的默认值。在需要时剪切内容并添加滚动条

hidden:不显示超过对象尺寸的内容。

scroll:总是显示滚动条。

实例

代码如下

复制代码

body { overflow: hidden; }

div { overflow: scroll; height: 100px; width: 100px; }

css

代码如下

复制代码

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>111cn.net</title>

<style type="text/css">

#yc {

width:180px;

height:100px;

overflow:hidden;

}

</style>

</head>

<body>

<div id="yc">

<table cellspacing="0" cellpadding="0">

<tr>

<td>111cn.net 专业div+css教程 111cn.net 专业div+css教程 111cn.net 专业div+css教程 </td>

</tr>

<tr>

<td>111cn.net 专业div+css教程 111cn.net 专业div+css教程 111cn.net 专业div+css教程 </td>

</tr>

<tr>

<td>111cn.net 专业div+css教程 111cn.net 专业div+css教程 111cn.net 专业div+css教程 </td>

</tr>

</table>

</div>

</body>

</html>

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港