Minor issues encountered when text-overflow: ellipsis overflow is used to display ellipsis. text overflow shows ellipsis.

Minor issues encountered when text-overflow: ellipsis overflow is used to display ellipsis. text overflow shows ellipsis.

I am just an intern. I am writing something for the first time. I hope you will encourage me a lot.

In the project, it is not difficult to display titles that exceed a certain length in the form of ellipsis. But I don't want to use js to implement it, So Baidu finds out.Text-overflow: ellipsis;(In fact, it has been around for a long time, but I didn't know it before) This style can achieve this effect, and all mainstream browsers support the text-overflow attribute.

The following code is used:

. Ellipsis {width: 300px; white-space: nowrap; word-break: break-all; overflow: hidden; text-overflow: ellipsis ;}

However, there is a problem with the effect.

This problem makes me very puzzled. Later I tried to addFloat: left;Actually good

I wantText-overflowAndFloatIt doesn't matter. I tried again.Display: block, display: inline-blockYes,

I went to Baidu again and found thatText-overflow: EllipsisYou must set the width of the element, but it is not allowed to directly set the width of the element in the row.<Span> tag,The reason why IFloat: leftThe effect can be achieved because the Row Element becomes a block element after float is used. If I addDisplay: blockThe results are the same. In this case, you only need to set the elements to be displayed as block elements.