1.单行和多行文本超出省略号
<div class="container"> <p class="single"> <span class="c-red">单行溢出：</span>花半开最美，情留白最浓，懂得给生命留白，亦是一种生存的智慧。恬淡以明志，平静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留;懂得给感情留白，方能长久生香，留有余地，互相观赏，领有默契;懂得给生存留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风光要远观，能力美妙;有些人情要漠然，才会长远，人生平淡更长久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的间隔。 </p> <p class="mutiple"> <span class="c-red">多行溢出：</span>静静的心里，都有一道最漂亮的风光。只管世事繁冗，此心仍然，情怀仍然;只管平稳流离，脚步仍然，谋求仍然;只管岁月沧桑，世界仍然，生命仍然。守住最美风光，成为一种风度，平静而致远;守住最美风光，成为一种境界，悠然而豁达;守住最美风光，成为一种睿智，淡定而从容。带着前世的印记，心怀污浊，身披霞带，踏一水清盈，今生，寻美妙而来。 </p></div>/*容器*/ .container { width: 300px; height: 200px; margin: 100px; padding: 20px; border: 1px solid #eee; font-size: 13px; color: #555; } .c-red { color: red; } p { background-color: rgba(189, 227, 255, 0.28); padding: 2px 5px; } /*单行*/ .single { width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } /*多行*/ .mutiple { display: -webkit-box; /*重点，不能用block等其余，将对象作为弹性伸缩盒子模型显示*/ -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列形式）*/ -webkit-line-clamp: 3; /*行数，超出三行暗藏且多余的用省略号示意...*/ line-clamp: 3; word-break: break-all; overflow: hidden; max-width: 100%; }2.暗藏滚动条或更改滚动条款式
<p class="scroll-container">花半开最美，情留白最浓，懂得给生命留白，亦是一种生存的智慧。恬淡以明志，平静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留;懂得给感情留白，方能长久生香，留有余地，互相观赏，领有默契;懂得给生存留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风光要远观，能力美妙;有些人情要漠然，才会长远，人生平淡更长久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的间隔。静静的心里，都有一道最漂亮的风光。只管世事繁冗，此心仍然，情怀仍然;只管平稳流离，脚步仍然，谋求仍然;只管岁月沧桑，世界仍然，生命仍然。守住最美风光，成为一种风度，平静而致远;守住最美风光，成为一种境界，悠然而豁达;守住最美风光，成为一种睿智，淡定而从容。带着前世的印记，心怀污浊，身披霞带，踏一水清盈，今生，寻美妙而来。</p>.scroll-container { width: 500px; height: 150px; border: 1px solid #ddd; padding: 15px; overflow: auto; /*必须*/ } .scroll-container::-webkit-scrollbar { width: 8px; background: white; } .scroll-container::-webkit-scrollbar-corner, /* 滚动条角落 */ .scroll-container::-webkit-scrollbar-thumb, .scroll-container::-webkit-scrollbar-track { /*滚动条的轨道*/ border-radius: 4px; } .scroll-container::-webkit-scrollbar-corner, .scroll-container::-webkit-scrollbar-track { /* 滚动条轨道 */ background-color: rgba(180, 160, 120, 0.1); box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5); } .scroll-container::-webkit-scrollbar-thumb { /* 滚动条手柄 */ background-color: #00adb5; }3.纯CSS绘制三角形
/* 正三角 */.up-triangle { width: 0; height: 0; border-style: solid; border-width: 0 25px 40px 25px; border-color: transparent transparent rgb(245, 129, 127) transparent; } /* 倒三角 */ .down-triangle { width: 0; height: 0; border-style: solid; border-width: 40px 25px 0 25px; border-color: rgb(245, 129, 127) transparent transparent transparent; } div:last-child { margin-top: 1rem; }4.虚线框
<p class="dotted-line">花半开最美，情留白最浓，懂得给生命留白，亦是一种生存的智慧。恬淡以明志，平静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留;懂得给感情留白，方能长久生香，留有余地，互相观赏，领有默契;懂得给生存留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风光要远观，能力美妙;有些人情要漠然，才会长远，人生平淡更长久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的间隔。静静的心里，都有一道最漂亮的风光。只管世事繁冗，此心仍然，情怀仍然;只管平稳流离，脚步仍然，谋求仍然;只管岁月沧桑，世界仍然，生命仍然。守住最美风光，成为一种风度，平静而致远;守住最美风光，成为一种境界，悠然而豁达;守住最美风光，成为一种睿智，淡定而从容。带着前世的印记，心怀污浊，身披霞带，踏一水清盈，今生，寻美妙而来。</p>.dotted-line { width: 800px; margin: auto; padding: 20px; border: 1px dashed transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc .25em, white 0, white .75em);}5.卡券成果制作
<p class="coupon"> <span>100元</span>通用优惠券</p>.coupon { width: 300px; height: 100px; line-height: 100px; margin: 50px auto; text-align: center; position: relative; background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat, radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat, radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat, radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));}.coupon span { display: inline-block; vertical-align: middle; margin-right: 10px; color: red; font-size: 50px; font-weight: 400;}原文链接：https://www.sdk.cn/details/KYBPl6xedA5Ob5mE4D
SDK社区是一个中立的社区，这里有多样的前端常识，有丰盛的api，有爱学习的人工智能开发者，有有趣风趣的开发者带你学python，还有将来炽热的鸿蒙，当各种元素组合在一起，让咱们一起脑洞大开独特打造业余、好玩、有价值的开发者社区，帮忙开发者实现自我价值！