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可 ...
随机推荐
- 20145224&20145238《信息安全系统设计基础》实验一 开发环境的熟悉
20145224陈颢文20145238荆玉茗 <信息安全系统设计基础>第一次实验报告 课程:信息安全系统设计基础 班级: 1452 姓名:荆玉茗 陈颢文 学号:20145238 20145 ...
- [转]如何将SQL Server表驻留内存和检测
注意这个功能在SQL2005后已经废弃,因为SQL2005会自动管理哪些表常驻内存. 将SQL Server数据表驻留内存是SQL Server提供的一项功能,在一般小型系统的开发过程中估计很少会涉及 ...
- 详解依赖注入(DI)和Ioc容器
简单的来说,关键技术就是:注册器模式. 场景需求 我们知道写一个类的时候,类本身是有个目的的,类里面有很多方法,每个方法搞定一些事情:我们叫这个类为主类. 另外这个主类会依赖一些其他类的帮忙,我们叫这 ...
- Mac配置
1.显示Mac隐藏文件的命令: defaults write com.apple.finder AppleShowAllFiles -bool true 2.Mac键盘如何开启键盘上F1 - F12功 ...
- php实现数字格式化,数字每三位加逗号的功能函数
原地址:http://www.jb51.net/article/73781.htm php实现数字格式化,数字每三位加逗号的功能函数,具体代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 ...
- 在项目里交叉使用Swift和OC【转】
Swift and Objective-C in the Same Project在项目里交叉使用Swift和OC Swift与OC的兼容性使得你可以在项目里使用Swift+OC的方式编写应用程序,称 ...
- ubuntu dpkg 依赖问题处理
ubuntu dpkg 依赖问题处理 使用 apt-get 安装软件期间,如果出现意外中断的情况,下次安装时会出现 dpkg 的一系列依赖问题,提示如下 :: dpkg: error processi ...
- C# ASP.NET MVC HtmlHelper用法大全
UrlHrlper 下面的两个地址一样的功能 下边这个防止路由规则改变 比如UserInfo/Index改为UserInfo-Index,使用下面的不受影响 另一种形式的超链接: <%: Htm ...
- 【Unity3D基础】让物体动起来①--UGUI鼠标点击移动
背景 首先还是先声明自己是比较笨的一个人,总是找不到高效的学习方法,目前自己学习Unity3D的方式主要是两种,一种是直接看高质量的源码,另一种是光看不行还要自己动手,自己写一些有代表性的小程序,这也 ...
- 解决Firefox浏览器每次打开都弹出导入向导的问题
每次打开Firefox浏览器都会弹出导入向导这个页面,只有这个页面关闭后,Firefox界面才会打开. 解决办法: C:\Users\{用户名}\AppData\Roaming\Mozilla\Fir ...