CSS 超出隐藏问题
- border-bottom: 0 solid #DDD;
- border-top: 1px dotted transparent;
- color: #4f99c6;
- text-align: center;
- font-size: 13px;
:first-child和:last-child
用来选择某个元素的第一个子元素。
//输入ul li:first-child
//输入ul li:last-child
刚刚有个这方面的视频,视频的系列名称叫做 《Buid New World》 里面的第八集是讲CSS3 选择器的,有机会看看吧 CSS中的background-imgage的url老是忘记,现在写出来特意记一记
background-image: url(/html/image/logo.gif);
---------------------------------------------------------------------------------------------------------------------------151029
今天遇到超出隐藏问题,网上资料显示:
<span style="color:#ff0000;">text-overflow:ellipsis;</span>//让超出的用...实现 ellipsis省略号
<span style="color:#ff0000;">white-space:nowrap;</span>//禁止换行
<span style="color:#ff0000;">overflow:hidden;</span>//超出的隐藏
http://www.jb51.net/css/177595.html在chrome下测试未生效
另有:
<!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=utf-8" />
<title>无标题文档</title>
</head>
<body>
<span style="width:200px; height:20px; border:0px; overflow:hidden; float:left;" id="more1">测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</span><span onclick="document.getElementById('more1').style.height='auto'"> 显示更多</span>
</body>
</html>
效果能够实现,
overflow:hidden;float:left(或right);是必须的
但是同行内相邻<span></span>会受float:left影响引起错位,有待更进一步学习研究
--------------------------------------------------------------------------------------------------------------------------------------151102
CSS 超出隐藏问题的更多相关文章
- css超出隐藏显示省略号怎么设置?
当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...
- css 超出隐藏显示...
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- CSS 超出隐藏实现限制字数的功能代码(多浏览器支持)
<html> <title>css控制字数</title> <head> <style type="text/css"> ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- css文本超出隐藏 显示三个点
文本超出显示三个点一般分两种情况 一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...
- CSS实现不换行/自动换行/文本超出隐藏显示省略号
在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...
- CSS中隐藏内容的3种方法及属性值
CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59) 在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...
- css 超出部分显示省略号
代码: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...
- CSS中隐藏内容的3种方法
CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...
随机推荐
- x square x cube
Mathematical Thought From Ancient To Modern Times
- SPARK支持的常见文件格式
SequenceFile读写文件Scala\java类型对应表
- tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...
- 【转】Ubuntu防火墙设置
1.安装 sudo apt-get install ufw 2.启用 sudo ufw enable sudo ufw default deny 运行以上两条命令后,开启了防火墙,并在系统启动时自动开 ...
- 字符流和字节流(FileReader类和FileWriter类)
字符流主要用于支持Unicode的文字内容,绝大多数在字节流中所提供的类,都可在此找到对应的类.其中,输入流Reader抽象类帮助用户在Unicode流内获得字符数据,而Writer类则实现了输出.可 ...
- leetcode 374
这个题目很简单,但是要注意细节和对题目的理解,一开始我把guess函数的作用理解错了,第一版代码长这样: int guessNumber(int n) { ; int high = n; while( ...
- Visual Studio 2010初学者的调试指南:Mastering Debugging in Visual Studio 2010 - A Beginner's Guide
Introduction In the software development life cycle, testing and defect fixing take more time than a ...
- PAT乙级 1033. 旧键盘打字(20)
1033. 旧键盘打字(20) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 旧键盘上坏了几个键,于是在敲一段文 ...
- JS数组定义【收藏】
最近在学习JS,刚好学到数组,发现章节还蛮多了而且发现了数组的以前好多不知道的东西,顺便整理下: 数组一共有有四种定义的方式 使用构造函数: var a = new Array(); var b = ...
- 推荐使用Wiz笔记发表博客
一直用Wiz笔记,平时随手记录一些东西,可以自动在多台电脑同步,还支持移动客户端,上下班路上用手机也能看.最近在整理之前工作的一些资料,并把自己觉得可以分享的内容发到博客园上.当然会先在Wiz笔记上编 ...