我从现象中学到的CSS
文字溢出隐藏
如果你观察过浮动元素,你会发现这样一个事实,当前一个元素将宽度占满以后,后一个元素就会往下掉,如下所示
代码如下
<style>
div,p{
margin:0;
}
#box{
width: 100px;
height: 20px;
border: 1px solid red;
}
#box .content{
float:left;
height: 100%;
margin-right: 20px;
}
</style>
<div id="box">
<p class="content">CSS</p>
<p>乐趣</p>
</div>
也许在你眼里这是个再正常不过的现象,不过有人却将这个现象用在了实现文本溢出隐藏上,我们来看看他们是怎么实现的。
<style>
div,p{
margin:0;
}
#box{
width: 100px;
height: 20px;
border: 1px solid red;
}
#box p:first-child{
float:left;
height: 100%;
padding-right: 1em;
word-break:break-all;
overflow:hidden;
}
#box p:last-child{
position:relative;
top:-20px;
text-align:right;
}
</style>
<div id="box">
<p>CSS</p>
<p>...</p>
</div>
先来看看它的效果,如下
实现这个效果的原理就是先将省略号通过相对定位移动到box的上方,当第一个元素p的内容超过box元素的宽度时,第二个p元素就会掉下来(一行的高度),如果只想让...在第一个p元素内容超出时才显示,我们可以给box元素加上overflow:hidden;即可。
也不一定得用浮动,两个块元素也是没有问题滴,前一个内容越多后一个元素就越往后,不多说上例子。
<style>
div,p{
margin:0;
}
#box{
width: 100px;
height: 20px;
border: 1px solid red;
}
#box p:first-child{
max-height: 40px;
padding-right: 1em;
word-break: break-all;
overflow: hidden;
}
#box p:last-child{
position: relative;
top: -44px;
text-align: right;
}
</style>
<div id="box">
<p>CSS</p>
<p>...</p>
</div>
这里比之前写的代码多了一行max-height: 40px;之所以这样做是因为我们希望第一个p元素的内容超出才显示第二个元素,而第二个元素是在当第一个元素的宽超出box才会被显示,而只有当第一个p元素2行的时候才算超出,另外这里不用height也是有原因的,如果设置的是height,那么高度就被固定了,如果高度都固定了,显然就不可能去影响第二个p元素。
一行居中,多行居左
需要做到1行居中,多行居左,其实也很简单,我们知道每个元素都可以独自设置自己的文本对齐方式,假如我们将HTML结构写成下面这样
<div id="box">
<p>CSS乐趣</p>
</div>
我们知道父元素是可以控制子元素的对齐方式的,我们先将box的text-align设置成center,再将p元素的text-align设置成left,经管如此设置,结果还是不行的。
<style>
div,p{
margin:0;
}
#box{
width:100px;
border:1px solid red;
text-align:center;
}
#box p{
text-align:left;
}
</style>
结果如下
可以看到p元素,显示的是左对齐,并没有被居中,其原因在于p元素的宽是占满box元素的,这也是块元素的一个特点,假如我们将p元素的display改成inline或者inline-block,p元素就居中了,如下
我们将内容加到两行看看
很显然这不是我们所希望看到的,之所以p元素设置的text-align:left;没有起作用,是因为此时p元素是行内元素,它的宽度是随着内容自适应的,所以永远都不可能多出空间来,既然没有多出的空间,自然就不可能有对齐方式,因为内容就占满了整个空间,虽然行内元素做不到,但是行内块则是可以的,如下
行内块元素的宽虽然是根据内容来的,但和行内元素不同的是,行内块元素的的每一行行宽都已经确定了的(最宽的行宽),所以行内块在内容没有占满的情况下,是可以设置文字的对齐方式的。
我从现象中学到的CSS的更多相关文章
- 透过现象看webpack处理css文件中图片路径转换的具体过程
webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也 ...
- CSS十问——好奇心+刨根问底=CSSer
最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限 ...
- DIV+CSS系统学习:转载
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
- CSS十问——好奇心+刨根问底=CSSer (转)
最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限 ...
- CSS十问
CSS十问——好奇心+刨根问底=CSSer 最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问 ...
- 【转】 CSS十问——好奇心+刨根问底=CSSer
最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限 ...
- css befroe after 尾类技术器
CSS counter计数器(content目录序号自动递增)详解 这篇文章发布于 2014年08月26日,星期二,15:54,归类于 css相关. 阅读 44148 次, 今日 11 次 by zh ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- CSS计数器(序列数字字符自动递增)详解———张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4303 一.挖坟不可耻 ...
随机推荐
- FineUIMvc随笔(5)UIHelper是个什么梗?
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. UIHelper.Result 在 FineUIMvc 的每一个 HttpPost 的控制器方法里面,你都会看到 UIHelpe ...
- 简单聊聊TestNG中的并发
前言 最近在做项目里的自动化测试工作,使用的是TestNG测试框架,主要涉及的测试类型有接口测试以及基于业务实际场景的场景化测试.由于涉及的场景大多都是大数据的作业开发及执行(如MapReduce.S ...
- 【方法】Oracle用户密码含特殊字符时的登陆问题
[方法]Oracle用户密码含特殊字符时的登陆问题 1.1 BLOG文档结构图 1.2 前言部分 1.2.1 导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它 ...
- Python中的日期和时间
感觉C语言作为一门编程的入门语言还是很好的,相比较之下,Python为代表的一些语言,适合很多非计算机专业的编程入门学习. Python 日期和时间 Python 程序能用很多方式处理日期和时间,转换 ...
- .Net轻量级ORM-NPoco的使用方法-摘自NPoco国外官方Wiki
文章引用自NPoco官方Wiki,地址:https://github.com/schotime/NPoco/wiki,因公司网络不稳定,有时无法访问,特将其摘抄. Home Adam Schroder ...
- [项目记录] 用c语言完成的一个学生成绩管理系统
一.要求: 学生成绩管理系统 某班有最多不超过30人(具体人数由键盘输入)参加期末考试,最多不超过6门(具体门数由键盘输入).使用链表编程实现如下菜单驱动的学生成绩管理系统. 从文件读入每个学生个人信 ...
- TreeSet集合如何保证元素唯一
TreeSet: 1.特点 TreeSet是用来排序的, 可以指定一个顺序, 对象存入之后会按照指定的顺序排列 2.使用方式 a.自然顺序(Comparable) TreeSet类的add()方法中会 ...
- dxxzc团队及队员学号后三位
队名:dxxzc团队 组长:邢正080 组员:董冰068 许国庆079 张琦057 曹华058
- iOS开发之UIApplication和delegate
1.概述 所有的移动操作系统都有个致命的缺点:app很容易受到打扰.比如一个来电或者锁屏会导致app进入后台甚至被终止. 还有很多其它类似的情况会导致app受到干扰,在app受到干扰时,会产生一些系统 ...
- 英文单词断行问题:CSS中word-break、word-wrap以及hyphens的兼容性和区别
CSS中一提到单词断行,最先映入脑海的肯定是word-break和word-wrap这两条属性.但对于这两条属性到底有什么区别,兼容性如何,我一直都概念模糊.今天抽空把它们以及CSS3中新加入的断行属 ...