CSS学习--文本溢出

文本溢出

默认值

overflow: visible;

溢出时隐藏

overflow: hidden;

溢出时显示滚动

overflow: auto;

显示滚动条

/* x,y轴都可滚动 */
overflow: scroll;
/* 仅x轴滚动 */
overflow: scroll hidden;
/* 仅x轴滚动 */
overflow-x: scroll;
/* 仅y轴滚动 */
overflow-y: scroll;

处理长英文单词

word-break: normal | break-all | keep-all | break-word;

值	描述
normal	默认断行
break-all	截断单词，根据宽度自适应从哪里截断
keep-all	CJK不断行，其他同normal
break-word	截断超出行宽的单词

CJK: 中/日/韩文

换行

overflow-wrap: normal | break-word;

值	描述
normal	行内容下的最后一个单词的空格断开（可以超出行宽）
break-word	根据行宽截断超出行宽的单词

单行文本溢出

overflow: hidden;  /* 隐藏超出部分 */
white-space: nowrap;   /* 超出的文本保持在一行 */
text-overflow: ellipsis;  /* 截断文本处显示省略号 */

多行文本溢出(-webkit-)

display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical;  /* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-line-clamp: 2;  /* 限制在一个块元素显示的文本的行数 */
 overflow: hidden;