html中文本折叠问题解决

在html中,文本过长是经常遇到的问题,解决过程中有不同场景,不同的解决方法。

单文本

el{
  width: {自己长度};
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多文本

el{
  height: 100px;
  line-height: 20px;
  overflow: hidden;
}

万能js解决

在node中

str 为自己文本, limit 为自己需要的长度 ,在react中使用特别有效

{ (str.length > limit) ?  ((str.substring(0, len(str) - limit)) + '...') :  str }

正常hmtl中


    
        
    
    
        
abcdefghijklmnopqrs
abcdefghijklmnopqrstttttt

你可能感兴趣的:(html中文本折叠问题解决)