文字超出换行

文字超出换行

white-space:normal;
word-break:break-all;
overflow:hidden;

css3新增的属性,长单词自动换行

word-wrap: break-word;

实现单行超出部分显示为省略号

  /* 不换行 */
  white-space: nowrap; 
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 文字超出的部分显示为省略号 */
  text-overflow: ellipsis;

实现多行超出部分显示为省略号

  /* 超出部分隐藏 */
  overflow: hidden;

  /* 文字超出的部分显示为省略号 */
  text-overflow: ellipsis;
  
  display: -webkit-box;

  /* 显示的行数 */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;