CSS omits text adaptively according to container size
demand scene
When working on a front-end project, I want to omit the text adaptively according to the length of the container. In the process of writing, I used js to calculate whether the length of the container exceeds the predetermined length. This small function can be realized quickly and conveniently with css, so it is a shorthand for this article.
solution
width: 100%;/*给定宽度*/
height: 28px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
The function of the code is explained in turn below:
The pictures involved in the blog post are only for learning and communication. If there is any infringement problem, please contact me to modify it as soon as possible.
- text-overflow : Image source – RUNOOB.COM
- white-space : Image source w3cschool.com
* overflow : Image source – RUNOOB.COM
