text css

.ellipsis([@w](https://my.oschina.net/wbml): auto) {
  width: [@w](https://my.oschina.net/wbml);
  overflow: hidden;
  text-overflow: ellipsis;//溢出部分用...代替  ,clip超出的部分会被裁剪掉
  white-space: nowrap;//文本不会换行 ,pre类似pre标签,会保留原来文本的空格和换行符
  word-wrap: normal;//只在允许的断字点换行 ,break-word可以在长单词或者url中换行
}

.ellipsisLn(@line) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: [@line](https://my.oschina.net/line926);//行数
}

.text_wrap() {
  word-wrap: break-word;
  word-break: break-all;//允许在单词内换行
}

.hyphens() {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324935634&siteId=291194637