博客

CSS文字过长显示为…

方法一

	
	---可以是中文，英文，数字
	<div style="width: 220px; height: 50px; overflow: hidden; text-overflow:ellipsis"> 
	<nobr>我是一串文字，很长很长，最后容不下我了</nobr>
	</div>
    --不能是中文
     <div style="text-overflow:ellipsis;overflow:hidden;width:50px">123456789</div>

方法二

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

方法三

超过宽度省略

   width: 120px;//可以自定义宽度
   word-break: keep-all; // 不换行
   white-space: nowrap; // 不换行 
   overflow: hidden;//内容超出宽度时隐藏超出部分的内容 
   text-overflow: ellipsis;

扩展

超过宽度自动换行

display: flex;//实现横排
flex-wrap:wrap;//实现超出换行
 word-break: break-all;//解决数字，字母不换行

让段落开头自动空两格代码

  text-indent: 2em;