word-break和word-wrap

1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,如果还是放不下,就会截断。

相关推荐
前端Hardy14 小时前
HTML&CSS:翻书加载效果
前端·javascript·css·3d·html·css3
前端设计诗1 天前
CSS clamp() 函数:构建更智能的响应式设计
前端·css·less·css3·html5
小小优化师 anny2 天前
纯CSS 写的一个树状触摸菜单
前端·css·css3
Justinc.3 天前
CSS3_媒体查询(十一)
css·css3·媒体
Justinc.3 天前
CSS3_BFC(十二)
前端·css·css3
荆州克莱3 天前
Vue3 源码解析(三):静态提升
spring boot·spring·spring cloud·css3·技术
y先森3 天前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
y先森3 天前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
今天你有学习吗5 天前
解决canvas绘图模糊问题
javascript·css·css3
荆州克莱6 天前
Redis | Redis常用命令及示例总结(API)
spring boot·spring·spring cloud·css3·技术