如果您想限制文本在兩行內顯示,并在超過兩行時使用省略號來代替,可以使用CSS的text-overflow屬性來實現。
/* 限制兩行并使用省略號 */ .two-lines { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } /* 不限制高度,但使用省略號 */ .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
對于限制兩行的情況,將文本框的display屬性設置為-webkit-box,并將其定向為垂直方向(通過-webkit-box-orient)來使其在兩行垂直顯示。接下來,使用-webkit-line-clamp屬性將行數限制為2。最后,使用overflow屬性將文本溢出隱藏,并使用text-overflow屬性在溢出時顯示省略號。
如果您不想固定高度,但仍要使用省略號,可以將文本框的white-space屬性設置為nowrap,overflow屬性設置為hidden,并使用text-overflow屬性來顯示省略號。