css文字が部分を超えて自動的に省略記号を付ける

719 ワード

移動端では、適合時に文字がオーバーすることがよくありますが、最も合理的な方法は、オーバー部分に自動的に省略符を付けることです.使用する属性は
  • text-overflow: ellipsis;/トリミングテキスト/
  • を表す省略記号を表示する.
  • word-break: break-all;/単語内で改行を許可/
  • white-space: nowrap;/非改行制御単行テキスト/
  • 
    .a{
        width: 300px;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden; 
        
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;	/*      */
        height: 50px;	/*  div   */
        
    }
    
    .b{
        width: 300px;
        word-break: break-all;  /*        */
        text-overflow: ellipsis;/*               */
        overflow: hidden;
        white-space: nowrap;/*          */
    }