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 本站原创转载注明

 

您可能感兴趣的文章:
基于jquery实现的定时显示与隐藏div广告的实现代码
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
jQuery 动态酷效果实现总结
Javascript 连续滚动字幕的实现代码示例
jquery关于表格及表格列隐藏和显示问题探讨
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Jquery显示、隐藏元素以及添加删除样式
消息通知提醒插件 Pines Notify
Jquery AutoComplete自动完成 的使用方法实例
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)

[关闭]