不积跬步无以至千里,不积小流无以成江海

 Administrator     2022-12-20      前端框架      3431

css设置单行文本,多行文本超出点点的写法

一、单行文本、超出部分点点点

  1. 有宽度:width, 有宽度才能超出,所以至少是行内块级元素
  2. 不能换行:white-space:nowrap;
  3. 超出部分隐藏:overflow: hidden;

文本超出部分点点点:text-overflow: ellipsis

div {
	width: 200px;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

 

二、设置多行文本、指定行数、最后一行点点点

div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

三、多行点点点遇到的问题:数字不会自动换行

div{
	word-break: break-all;
}