隐藏x轴滚动条

  1. .demo {
  2.    scrollbar-width: none; /* Firefox */
  3.   -ms-overflow-style: none; /* IE 10+ */
  4.    overflow-x: auto;
  5. }
  7. .demo::-webkit-scrollbar {
  8.   display: none; /* Chrome Safari */
  9. }

超出文字显示省略号

单行

  1. .demo {
  2.   overflow: hidden;
  3.   white-space: nowrap;
  4.   text-overflow: ellipsis;
  5.   -o-text-overflow: ellipsis;
  6. }
  8. // 兼容代码
  9. {
  10.  text-overflow: ellipsis;
  11.   display: -webkit-box;
  12.   -webkit-line-clamp: 1;
  13.   -webkit-box-orient: vertical;
  14.   display: -moz-box;
  15.   -moz-line-clamp: 1;
  16.   -moz-box-orient: vertical;
  17.   word-wrap: break-word;
  18.   word-break: break-all;
  19.   white-space: normal;
  20.   overflow: hidden;
  21. }

两行

  1. .demo {
  2.   overflow: hidden;
  3.   display: -webkit-box;
  4.   -webkit-box-orient: vertical;
  5.   -webkit-line-clamp: 2;
  6.   -ms-text-overflow: ellipsis;
  7.   text-overflow: ellipsis;
  8. }

css纯数字和英文不自动换行

  1. .demo {
  2.     word-break: break-all;
  3. }

flex布局的宽度被压缩

  1. // 子元素设置最小宽度，设置flex-shrink: 0;
  2. .demo {
  3.   flex-shrink: 0;
  4.   min-width: 285px;
  5. }

横向滚动

  1. .father{
  2.   text-align: center;
  3.   white-space: nowrap;
  4.   overflow-x: scroll;
  5.   overflow-y: hidden;
  6. }