文字阴影与自动换行

it2022-05-05  185

文字阴影与自动换行

1. text-shadow text-shadow:length length length color 第一个length表示的是阴影离开文字的横坐标距离 第二个length表示的是阴影离开文字的纵坐标距离 第三个length表示的是阴影模糊半径 color表示阴影颜色

2. word-break

值换行规则normal 使用浏览器默认的规则keep-all只能在半角空格或连字符处理换行break-all允许在单词内换行

3. word-wrap

值换行规则normal使用浏览器默认的规则break-word长单词或url地址自动换行

效果图:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>文字阴影与自动换行</title> <style type="text/css"> h1{ color: red; text-shadow:5px 5px 5px yellow,10px 10px 10px green,20px 20px 20px black; } #p1{ word-break: keep-all; } /* p{ word-break: break-all; } */ #p2{ word-wrap: break-word; } </style> </head> <body> <h1>魔道祖师</h1> <P id="p1"> 文案: 前世的魏无羡万人唾骂,声名狼藉。被护持一生的师弟带人端了老巢, 纵横一世,死无全尸。 曾掀起腥风血雨的一代魔道祖师,重生成了一个…… 脑残。 还特么是个人人喊打的断袖脑残! 我见诸君多有病,料诸君见我应如是。 但修鬼道不修仙,任你千军万马,十方恶霸,九州奇侠,高岭之花, 但凡化为一抔黄土,统统收归旗下,为我所用,供我驱策! </P> <p id="p2"> https://www.html.cn/book/css/properties/content/counter-reset.htm Text: Wei Wu of his predecessor's life was disreputable because he was abused by millions of people. Teachers and disciples who had been guarded for a lifetime took people to their nests. Throughout life, there are no dead bodies. The ancestors of the Devil Tao, who once set off a bloody storm, have regenerated a new generation... Brain-impaired. It's especially a broken sleeve and brain handicapped by everyone shouting and interrupting! I see that many of you are sick, and I expect you to see me like this. But ghost cultivation does not cultivate immortals, let you thousands of troops, ten bullies, Kyushu chivalrous swordsmen, Kaolin flowers, But all into a loess, all under the banner, for my use, for my drive! </p> </body> </html>

最新回复(0)