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;/* */
}