文本显示 -- 换行处理

强制 英文换行

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;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值