###1. Single-line and multi-line text beyond ellipsis

<div class="container"> <p class="single"> <span class="c-red"> single line overflow: </span> Flowers are most beautiful when half opened. Indifferent to mingzhi, quiet so far, know how to leave the heart, can be in the complicated and tedious world, indifferent to gains and losses, unsurprised, no leave; Know how to leave feelings blank, can lasting fragrance, leave room, mutual appreciation, have a tacit understanding; Know how to leave life blank, take a poetic, leave a calm, more than a wise, life can be picturesque. People, far and near, time, shade appropriate. Some scenery to far view, to beautiful; Some people to be indifferent, will be long, life is dull and more lasting, white can be far, lotus raise heart, happy go lucky, the most beautiful of life is to understand the distance. </p> <p class="mutiple"> <span class="c-red"> Although the world is complicated, the heart is still, feelings are still; Despite turbulence and displacement, the pace is still, the pursuit is still; Despite the vicissitudes of time, the world remains the same, life remains the same. Keep the most beautiful scenery, become a grace, quiet and far; Keep the most beautiful scenery, become a realm, leisurely and open-minded; Keep the most beautiful scenery, become a wise, calm and calm. With the mark of the past life, pure heart, wearing xia belt, step a water qing Ying, this life, to find a good. </p> </div>Copy the code
/* container */. 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 */. Single {width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; } /* multiple lines */. Mutiple {display: -webkit-box; /* webkit-box-orient: vertical; /* webkit-box-orient: vertical; * -webkit-line-clamp: 3; /* The number of lines, more than three hidden and extra ellipsis denoted... */ line-clamp: 3; word-break: break-all; overflow: hidden; max-width: 100%; }Copy the code

###2. Hide the scroll bar or change the scroll bar style

<p class="scroll-container"> The most beautiful flowers are half opened, and the most profound feelings are left blank. To know how to leave white space for life is also a kind of wisdom in life. Indifferent to mingzhi, quiet so far, know how to leave the heart, can be in the complicated and tedious world, indifferent to gains and losses, unsurprised, no leave; Know how to leave feelings blank, can lasting fragrance, leave room, mutual appreciation, have a tacit understanding; Know how to leave life blank, take a poetic, leave a calm, more than a wise, life can be picturesque. People, far and near, time, shade appropriate. Some scenery to far view, to beautiful; Some people to be indifferent, will be long, life is dull and more lasting, white can be far, lotus raise heart, happy go lucky, the most beautiful of life is to understand the distance. Quiet heart, there is a most beautiful scenery. Although the world is complicated, the heart is still, feelings are still; Despite turbulence and displacement, the pace is still, the pursuit is still; Despite the vicissitudes of time, the world remains the same, life remains the same. Keep the most beautiful scenery, become a grace, quiet and far; Keep the most beautiful scenery, become a realm, leisurely and open-minded; Keep the most beautiful scenery, become a wise, calm and calm. With the mark of the past life, pure heart, wearing xia belt, step a water qing Ying, this life, to find a good. </p>Copy the code
.scroll-container { width: 500px; height: 150px; border: 1px solid #ddd; padding: 15px; overflow: auto; /* Must */}. Scroll -container::-webkit-scrollbar {width: 8px; background: white; }. Scroll container::-webkit-scrollbar-corner, /* scroll corner */. Scroll container::-webkit-scrollbar-thumb, .scroll-container::-webkit-scrollbar-track {/* scrollbar */ border-radius: 4px; } .scroll-container::-webkit-scrollbar-corner, .scroll-container::-webkit-scrollbar-track {/* scrollbar */ 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 {/* scrollbar */ background-color: #00adb5; }Copy the code

###3. Draw triangles with pure CSS

/* triangle */. Triangle {width: 0; height: 0; border-style: solid; border-width: 0 25px 40px 25px; border-color: transparent transparent rgb(245, 129, 127) transparent; } /* triangle */. 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; }Copy the code

# # # 4. Dotted box

<p class="dotted line"> <p class="dotted line"> <p class="dotted line"> <p class="dotted line"> Indifferent to mingzhi, quiet so far, know how to leave the heart, can be in the complicated and tedious world, indifferent to gains and losses, unsurprised, no leave; Know how to leave feelings blank, can lasting fragrance, leave room, mutual appreciation, have a tacit understanding; Know how to leave life blank, take a poetic, leave a calm, more than a wise, life can be picturesque. People, far and near, time, shade appropriate. Some scenery to far view, to beautiful; Some people to be indifferent, will be long, life is dull and more lasting, white can be far, lotus raise heart, happy go lucky, the most beautiful of life is to understand the distance. Quiet heart, there is a most beautiful scenery. Although the world is complicated, the heart is still, feelings are still; Despite turbulence and displacement, the pace is still, the pursuit is still; Despite the vicissitudes of time, the world remains the same, life remains the same. Keep the most beautiful scenery, become a grace, quiet and far; Keep the most beautiful scenery, become a realm, leisurely and open-minded; Keep the most beautiful scenery, become a wise, calm and calm. With the mark of the past life, pure heart, wearing xia belt, step a water qing Ying, this life, to find a good. </p>Copy the code
.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);
}
Copy the code

###5. Card effect production

<p class="coupon"> <span>Copy the code
.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;
}
Copy the code

Original link: www.sdk.cn/details/KYB…

SDK is a neutral communities, there are a variety of front knowledge, has the rich API, developers have a love of learning artificial intelligence, have humor developers take you learn python, there will be the next hot HongMeng, when various elements together, let us together to build professional, fun and imaginative valuable developer community, Help developers realize their self-worth!