Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 CSS控制文字溢出时的自动隐藏方法

CSS控制文字溢出时的自动隐藏方法

发布时间:2020-05-22   编辑:www.jquerycn.cn
jquery中文网为您提供CSS控制文字溢出时的自动隐藏方法等资源,欢迎您收藏本站,我们将为您提供最新的CSS控制文字溢出时的自动隐藏方法资源
 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS控制文字溢出时的自动隐藏方法</title>
</head>
<body>

<style>
 ul{ width:120px;overflow:hidden;}
</style>
<ul>
 <li>fdafdafdafdafdsafdafdafsa\\\\\\\\\\\\==============</li>

</ul>

<!-- 这里我们可以定义ul 宽度这样上面内容超过了120的宽度就会自动隐藏了overflow就生效了 -->

再看实例

<ul>
 <li>中国国震荡城市地厅城要魂牵梦萦地厅魂牵梦萦 </li>
 <li>fdafdafdafdafdsafdafdafsa\\\\\\\\\\\\==============</li>
</ul>

fdafdafdafda
中国国震荡城<br />
市地厅城要魂<br />
牵梦萦地厅魂<br />
牵梦萦 <br />

<!-- 我们看到中英语字符隐藏了,但中文没有隐藏,这里我们要知道英文不会自动换行,而中文会,所在我们在要css教程中加上 white-space:nowrap; 强制不换行-->

<style>
 ul{ width:120px;overflow:hidden;white-space:nowrap;}
</style>

在ie中看到的:

fdafdafdafda
中国国震荡城


</html>

www.111cn.net 本站原创转载注明

 

您可能感兴趣的文章:
CSS控制文字溢出时的自动隐藏方法
CSS 控制需隐藏的文字样式代码
CSS控制的内容超过容器宽度后显示省略号
css 文字溢出省略号样式代码
css隐藏文字一些方法总结
网页制作时CSS对文字溢出时的自动隐藏处理
用css实现文字的自动隐藏
jQuery源码分析系列(40): 动画设计
css div宽度自动隐藏并且显省略号
jquery控制css display属性(控制元素显示与隐藏)

[关闭]