css div宽度自动隐藏并且显省略号

<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<title>css div宽度自动隐藏并且显省略号</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
 #abc{
 display:block;/*内联对象需加*/
 width:200px;
 word-break:keep-all;/* 不换行 */
 white-space:nowrap;/* 不换行 */
 overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
 text-overflow:ellips教程is;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使*/
 }
 #cde{
  width:200px; /* 必须设置宽度 */
  word-break:keep-all;/* 不换行 */
  white-space:nowrap;/* 不换行 */
  overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow:ellipsis;/
 }
</style>
</head>
<body>
<div  id="abc">
fdsafdsaklfdjsaklf;djakl;fdjsakf;djsakfldajfklda;fjdsakl
</div>
<div  id="cde">
中国WEB第一站www.111cn.net提供最新的网页制作教程教程、网页设计教程、网页特效教程,为个人网站提供网页素材模板和网页视频学习
</div>
</body>
</html>

 

时间: 2024-10-26 14:21:48

css div宽度自动隐藏并且显省略号的相关文章

div+css 宽度自动隐藏并且显省略号

css教程 div宽度自动隐藏并且显省略号 <html xmlns="http://www.jzread.com/1999/xhtml"> <head> <title>css div宽度自动隐藏并且显省略号</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到&

CSS实例教程:img随div宽度自动变化

文章简介:css设置img随div宽度变化自动变化的方法. 说明: 因为屏幕分辨率不同,想实现浏览器中的一个层随浏览器宽度高度的变化而变化,使层始终占浏览器宽度的90%:高度的75%:层中的图片随这个层的变化而变化,相信很多人都在实际的项目中遇到过这个问题,下面是实现这种效果的解决方案: body { text-align:center;} html,body { height:100%;} .div1 { height:75%; width:90%; margin:0 auto; overfl

绝对定位的DIV宽度自动适应的一个方法_经验交流

刚刚在一个页面上用到了position:absolute; 这样的代码在IE7和FIREFOX都不会有问题,但是在IE6以下的会不支持: xmlns="http://www.w3.org/1999/xhtml"> 这是一个测试 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 于是针对IE6我又加了一个<hr /> 这下可以了: xmlns="http://www.w3.org/1999/xhtml"> 这是一个测试 [Ctrl+A

js和css写一个可以自动隐藏的悬浮框_javascript技巧

今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天要说的就是通过控制其大小来实现元素的显隐,原理:为其注册鼠标移入.移出的事件,当鼠标移出对象范围,将其宽度设为1,当鼠标再次移入该对象,将其宽度还原.很简单,我们一起看看吧! 隐藏状态:   左边那一条窄线就是隐藏以后的悬浮框. 显示状态:   当鼠标滑到左边的悬浮框上,悬浮框就又显示出来了. CS

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=&qu

使用CSS自动隐藏网页文字的技巧

文字隐藏应用广泛,但常用的方法没有什么亲和力.常用文字隐藏方法的缺陷: 1.display:none 这种方法搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略: 屏幕阅读器会忽略被隐藏的文字. 2.visibility: hidden 这种方法隐藏了文字却仍然占据物理空间. 3.推荐大家使用这个更好的方法: overflow:hidden .class{ display:block; /*统一转化为块级元素*/ width:0; height:0; overflow:hidden; } 从代码似

css实现li中文本超出行宽自动隐藏

li中的文本超出行宽自动隐藏,在一些新闻类的列表应用中还是比较实用的,具体的实现css样式如下,感兴趣的朋友可以参考下,希望对大家有所帮助     复制代码 代码如下: .aa{white-space:nowrap; text-overflow:ellipsis; overflow: hidden; }

css的div宽度多了一部分

问题描述 css的div宽度多了一部分 一致找不到蓝色背景下的那个3px的粉红色背景是咋个产生的,望高手赐教啊,小弟感激不尽 附上源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style> html,div{margin:0px;padding: 0p

css div自适应宽度实例

当内容超出父级元素宽度,在未设置white-space:nowrap时会自动换行,设置了white-space:nowrap样式又不能关联到滚动条延伸的部分,解决方案如下:       1.在父级元素添加white-space:nowrap属性:       2.计算(每一行)内容宽度:            a.将内容拆分,包括缩进.图片和文字.            b.利用<又谈换行情况处理>中在body末尾添加非换行dom元素计算文字宽度.            c.叠加拆分的小块宽度