展会信息港展会大全

CSS控制文字溢出时的自动隐藏方法
来源:互联网   发布日期:2016-03-25 16:19:12   浏览:1841次  

导读:代码如下 复制代码 !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=gb23...

代码如下

复制代码

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

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

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