css换行
1⃣️强制不换行
p{
white-space:nowrap;
}
2⃣️自动换行
p{
word-wrap: break-word;
word-break: normal;
}
3⃣️强制英文单词断行
p{
word-break:break-all;
}
4⃣️本人在用 中英文都换行
p{
white-space:pre-line;
word-wrap: break-word;
word-break: normal;
}
⚠️：官方解释
一.word-wrap：属性允许长的内容可以自动换行。
值 描述
normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。
二.white-space：属性指定元素内的空白怎样处理。
值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
三.word-break属性指定非CJK脚本的断行规则。
提示:CJK脚本是中国，日本和韩国（"中日韩"）脚本。
值 描述
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
⚠️：本人理解
由于本人项目多处用到富文本，页面展示的时候不确定是文字、图片、英文、等等
（指出不太好理解的，本人不太理解的）
一.word-wrap：属性允许长的内容可以自动换行。
值 描述
break-word 不管英文是不是完整直接切断换行（页面不好看）
三.word-break：属性指定非CJK脚本的断行规则
值 描述
break-all 不管英文是不是完整直接切断换行（页面不好看）
keep-all 逗号，句号等直接换行 （页面不好看）
css首行缩进
1⃣️缩进2格
p{
text-indent:2em;
}
⚠️：text-indent 属性规定文本块中首行文本的缩进。
css鼠标样式
1⃣️手势(本人用的多)
p{
cursor:pointer;
}
⚠️：cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状
值 描述
url 需使用的自定义光标的 URL。
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
注意：仅提供参考，谢谢🙏
完！
网友评论