css的溢出隐藏和多行隐藏

首先是准备一个盒子div 设置相关的大小

  <div class="a">12121212121211111111111111111111111111111111111</div>

这边设置样式 这个rem 设置的自适应的   可以直接粘贴 就可以用了

.a {
  width: 2.5rem;
  height: 3.75rem;
  background: #dd4;
  /*如果文字显示不开自动换行*/
  // white-space: normal;
  /*1.如果文字显示不开也必须一行内显示*/
  white-space: nowrap;
  /*2.溢出的部分隐藏起来*/
  overflow: hidden;
  /*3.文字溢出的时候用省略号来显示*/
  text-overflow: ellipsis;
}

这个是自适用的效果 并且也是有省略号的

 上方是一行的隐藏的代码  直接复制就可以用了

下面是多行的隐藏的代码  同上 我设置的是 高度是自动的

.a {
  width: 2.5rem;
  height: auto;
  background: #dd4;
  word-wrap: break-word; /*强制换行*/
  // width: 100%;
  overflow: hidden; //超出文本隐藏
  text-overflow: ellipsis; //溢出显示省略号
  display: -webkit-box; //设置为弹性盒子
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; //只显示两行
}

 这个根据自身情况来使用

下面是相关的效果

表格的换行

   table td{
                     white-space:pre-wrap;   // 保留空白符序列，但是正常地进行换行。
                     word-wrap: break-word;  //在长单词数字或 URL 地址内部进行换行
                }
                
                table th{
                     white-space:pre-wrap;   // 保留空白符序列，但是正常地进行换行。
                     word-wrap: break-word;  //在长单词数字或 URL 地址内部进行换行
                }