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可 ...
随机推荐
- 【转】NGUI研究院之为什么打开界面太慢(十三)
NGUI打开界面太慢了,起初一直以为是unity的问题,最近经过我的全面测试我发现这和unity没有关系.一般一个比较复杂的界面大概需要150个GameObject 或者 UISprite .我用N ...
- 模块加载----Webpack
一.配合gulp编译sass与压缩js 1.安装node.js 2.全局安装webpack 打开npm窗口执行 npm install webpack –g 3. 在项目中使用webpack 使用np ...
- IEnumerable、GetEnumerator、IEnumerator的理解
概念文字性的东西,我们就不说了,这里我们来点具体的实例第呀: 实例一: using System; using System.Collections; using System.Collections ...
- Django,数据模型创建之数据库API参考(转载)
一旦 数据模型 创建完毕, 自然会有存取数据的需要.本文档介绍了由 models 衍生而来的数据库抽象API,及如何创建,得到及更新对象. 贯穿本参考, 我们都会引用下面的民意测验(Poll)应用程序 ...
- 《奥威Power-BI销售计划填报 》精彩回顾
我们经常遇到这样的问题:业务单据是来自ERP系统,销售计划是EXCEL做的,想把两者整合在一起做分析,怎么办? 单据大,导出EXCEL太费劲,也很难分析到历史数据,但又不能动ERP系统 (自己也不会改 ...
- magento -- 解决magento错误:ERROR: Base table or view already exists: 1050 Table ... already exists
相信有更新magento或者,备份转移magento站点的时候可能会碰到类似这样的错误提示: Base table or view already exists: 1050 Table ... alr ...
- Spring MVC Integration,Spring Security
http://docs.spring.io/spring-security/site/docs/4.2.0.RELEASE/reference/htmlsingle/#authorize-reque ...
- Linux:SSH错误"WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! "
hadoop@master:~$ scp /home/hadoop/.ssh/authorized_keys node3:/home/hadoop/.ssh/ @@@@@@@@@@@@@@@@@@@@ ...
- openssl 证书操作命令
生成Self Signed证书 # 生成一个key,你的私钥,openssl会提示你输入一个密码,可以输入,也可以不输, # 输入的话,以后每次使用这个key的时候都要输入密码,安全起见,还是应该有一 ...
- JAVA经典算法40题(1-20)
[程序1] 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第四个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 1.程序分析: 兔子的规律 ...