文本显示 -- 换行处理

强制 英文换行

word-break:break-all !important; word-wrap:break-word !important; white-space:pre-wrap !important;

不换行，超出的部分用...代替

overflow:hidden; white-space:nowrap; text-overflow:ellipsis;

设置行数，超出的部分用...代替

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

竖向渐变文本

background-image: -webkit-linear-gradient(#643EFF , #FF6CB3);
background-image:         linear-gradient(#643EFF , #FF6CB3);
background-image: -webkit-linear-gradient(-90deg , #643EFF , #FF6CB3);
background-image:         linear-gradient(180deg , #643EFF , #FF6CB3);
-webkit-background-clip: text;
background-clip: text;
/* background-size: 10% 10%; */
color: transparent;

横向渐变文本

background-image: -webkit-linear-gradient(left     , #643EFF , #FF6CB3 20%);
background-image:         linear-gradient(to right , #643EFF , #FF6CB3 20%);
background-image: -webkit-linear-gradient(0deg  , #643EFF , #FF6CB3 20%);
background-image:         linear-gradient(90deg , #643EFF , #FF6CB3 20%);
-webkit-background-clip: text;
background-clip: text;
/* background-size: 100%; */
-webkit-text-fill-color: transparent;

文字边框

-webkit-text-stroke: 2px blue;
镂空文字
color: transparent; -webkit-text-stroke: 2px blue;

文字边框+投影（例：白字，黑边框，橙色投影）

letter-spacing: 3px;
color: rgb(255, 255, 255);
text-shadow: rgb(33, 50, 78) 1px 1px,
rgb(33, 50, 78) 1px -1px,
rgb(33, 50, 78) -1px 1px,
rgb(33, 50, 78) -1px -1px,
rgb(33, 50, 78) 0px 1.4px,
rgb(33, 50, 78) 0px -1.4px,
rgb(33, 50, 78) -1.4px 0px,
rgb(33, 50, 78) 1.4px 0px,
rgb(236, 111, 28) 0px 3px,
rgb(236, 111, 28) 1px 4px,
rgb(236, 111, 28) 1px 2px,
rgb(236, 111, 28) -1px 4px,
rgb(236, 111, 28) -1px 2px,
rgb(236, 111, 28) 0px 4.4px,
rgb(236, 111, 28) 0px 1.6px,
rgb(236, 111, 28) -1.4px 3px,
rgb(236, 111, 28) 1.4px 3px;

box-decoration-break

box-decoration-break 属性规定当元素框被分段时，如何应用元素的 background、padding、border、border-image、box-shadow、margin 以及 clip-path

slice : 
span{ line-height: 1.6; border-radius: 10px; border: green solid 2px;
    -webkit-box-decoration-break: slice;
}
clone : 
span{ line-height: 1.6; border-radius: 10px; border: green solid 2px;
    -webkit-box-decoration-break: clone;
}

CSS之中英文左右（两端）对齐
英文对齐
<div style="text-align:justify;text-justify:newspaper;">
中文对齐:
<div style="text-align:justify;text-justify:inter-ideograph;">

以上方法对 chrome（360也是chrome内核）无效，还需再加上代码： word-break:break-all;