2.CSS文本
- 2.1
white-space: pre-line;
强制文字进行换行,前提是在文本中要先在文字中加” \n “,这样css识别出来在此处进行强制换行。
word-wrap:normal | break-word
, break-word
可以将内容在边界内换行(不截断英文单词的换行)
word-break:keep-all | break-all
当设置keep-all
的时候,对于中文文本来说,只可以在半解空格或连字符或任何标点符号的地方换行,中文与中文之间不可以换行,一个长文本也不可以换行。
当设置break-all
的时候,主要是在不同的浏览器上显示的效果都不同,因为每个浏览器的内核不同,这里在chrome、safari、Firefox中可以允许标点符号位于首行显示。
- 2.2
溢出文本text-overflow
text-overflow: clip | ellipsis
有两个属性,一个是默认的属性clip
, 另一个是ellipsis
,
如果要实现溢出隐藏,必须满足3个条件:
- width
:明确给需要截取文本的容器设置宽度值。
- white-space:nowrap
:给文本容器设置强制不换行,让元素文本一行内显示。
- over-flow: hidden
:设置容器文本溢出时隐藏。
执行上面的属性条件之后,页面超出的文字部分将会以...
的形式显示。
3.点击事件on和onclick 两者之间的区别(很重要)
- 第1种事件
$('.XX').click('.xxx',function() { alert('xxx') });
- 第2种事件
$('.XXX').on('click','.xxx', function() { alert('xxx') })
click是点击事件,但是在页面加载完之后,jquery事件新添加的元素,用click的话是无法获取元素的,这个时候要用on去获取元素事件,简单的说页面加载完成时候页面显示的元素可以用on,也可以用click,但是页面加载完成之后后期再追加的元素只能用on。
这两个事件的区别之处在于:
简单的说页面加载完成时候页面显示的元素(DOM节点已全部加载完)可以用 on
, 也可以用click
,
但是在页面加载完成之后后期再追加元素(DOM节点元素还没完全显示出来)只能用on
解释一下:
$('.AAA').on('click','.bbb', function() { alert('bbb') })
获取class 为bbb元素的上一级(或父级)元素,选择click的方式,执行回调函数function ()并运行弹出元素bbb,这里的on,元素bbb如果没全部加载出来。没有直接获取到class为bbb的元素,这个时候它就会去找上一级(或父级)的元素,然后在从上一级(或父级)往下接着再执行,就会找到class为bbb的元素了,就触发了点击事件,并执行事件里面的函数啦 ~