1、英文单词不换行问题

  1. .text {
  2.     /* word-wrap: break-word; */
  3.   word-break: break-all;
  4. }
  • word-wrap : break-word; 以单词换行，可能不对齐，会出现空白
  • word-break: break-all; 所有都换行，是以div宽度进行换行的，可能会影响单词的完整性


2、文字溢出

  1. /* 单行文字溢出 */
  3. .t-overflow {
  4.   overflow: hidden;
  5.   white-space: nowrap;
  6.   text-overflow: ellipsis;
  7. }
  9. .ts-overflow {
  10.   display: -webkit-box;
  11.   overflow: hidden;
  12.   text-overflow: ellipsis;
  13.   word-break: break-all;
  14.   -webkit-box-orient: vertical;
  15.   line-clamp 4;
  16.   -webkit-line-clamp: 4;
  17. }

3、格子背景

  1. .page{
  2.       background-position: center top;
  3.     background-size: 30px 30px;
  4.     background-color: #fcfcfc;
  5.     background-image: linear-gradient(to right,rgba(37,82,110,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(37,82,110,.1) 1px,transparent 1px);
  6.     color: #342c2c;
  7. }