用CSS让文字在一行内显示不换行的方法:
一般的文字截断(适用于内联与块):
.text-overflow{
display:block /*内联对象需加*/
width:31em
word-break:keep-all /* 不换行 */
white-space:nowrap /* 不换行 */
overflow:hidden /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis /*溢出时显示省略标记...;需与overflow:hidden一起使用*/
}
对于表格,定义有点不一样:
table{
width:30em
table-layout:fixed /*只有定义了表格的布局算法为fixed,下面td的定义才能起作用*/
}
td{
width:100%
word-break:keep-all /* 不换行 */
white-space:nowrap /* 不换行 */
overflow:hidden /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis /* 溢出时显示省略标记...;需与overflow:hidden一起使用*/
}
注:这个只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有"...",其它的浏览器文本超出指定宽度时会隐藏。
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
前面学习过CSS 的FlexBox布局,很大一部分页面基本都能实现了。不过昨天在练习封装一个Banner组件(虽然小程序提供了swiper)的时候,发现FlexBox无法满足需求,了解了一下可以用position来解决。效果如下:
对于一般块级元素,拿div来讲,在页面中独占一行,自上而下排列,也就是传说中的流。而即使是flex布局,也只是在横轴或纵轴上流式布局,而上图中一个div在另一个div上是没有办法满足的。
对于 Position ,其有四个属性值:
CSS有三种基本的定位机制:普通流,浮动和决定定位
多个浮动存在时,会按照流的方式规则排列
行框和清理:
前面说浮动元素会脱离文档流,不会影响不浮动的元素。不过如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间。
使用clear属性,可以组织行框围绕在浮动元素外边,属性的left、right、both、none表示框的哪些边不挨着浮动框。