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可 ...
随机推荐
- 交流从选择coding.net开始
之前提到我们需要coding.net(一个可以帮助你在线存放管理代码的地方,便于项目合作)来进行学习交流,它可以帮我们记录我们入门的点点滴滴,现在就简单介绍一下coding.net的注册及使用. 1. ...
- Multi-level Multi-select plugin
Property file: Country[tab]City United States[tab]San Francisco United States[tab]Chicago Mexico[tab ...
- override与overload的区别
override(重写,覆盖) 1.方法名.参数.返回值相同. 2.子类方法不能缩小父类方法的访问权限. 3.子类方法不能抛出比父类方法更多的异常(但子类方法可以不抛出异常). 4.存在于父类和子类之 ...
- StringBuffer与StringBuilder有什么区别
package String比较; /* * StringBuffer与StringBuilder有什么区别 * StringBuilder是JDK5增加的一个新类,功能几乎与StringBuffer ...
- Hibernate - lazy, fetch, inverse, cascade
Inverse是hibernate双向关系中的基本概念.inverse的真正作用就是指定由哪一方来维护之间的关联关系.当一方中指定了"inverse=false"(默认),那么那一 ...
- Android动画设计源码地址
Android动画设计源码地址 http://blog.csdn.net/shanghaibao123/article/details/45223825
- [转]Android SHA1与Package获取方式
转自高德地图LBS Android SHA1与Package获取方式 获取应用包名 打开Android 应用工程的 AndroidManifest.xml配置文件,package 属性所对应的内容为应 ...
- OleContainer控件介绍
OLEContainer 控件的主要属性 1) AllowInPlace property AllowInPlace:Boolean; 这个属性用于决定启动O ...
- http协议 301和302的原理及实现
一.来看看官方的说法: 301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于: 301 redirect: 301 代表永久性转移(Permanently Moved) ...
- Python快速建站系列-Part.Five.2-个人主页及文章列表
|版权声明:本文为博主原创文章,未经博主允许不得转载. 从usercen.html就可以发现我为个人主页设了三个分开的小版面:写文章.个人文章目录.个人资料 所以按顺序Part.Five的第二部分就完 ...