How to limit a text element to one line with CSS

by | May 25, 2020 | 0 comments

How to limit a text element to one line with CSS

by | May 25, 2020 | CSS Tips and Tricks | 0 comments



Learn how to limit a text element like a product title or post title to just one line using only CSS.

CSS snippets:

.product h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.product h2:hover {
white-space:normal;
overflow: visible;
text-overflow: initial;
}

*** CREDITS ***

Logo & Subscribe Visual – http://www.freepik.com

Intro Music – Heartbeat by LiQWYD https://soundcloud.com/liqwyd Creative Commons — Attribution 3.0 Unported — CC BY 3.0 http://creativecommons.org/licenses/by/3.0/ Music promoted by Audio Library https://youtu.be/CKvFTx6jefo

Background Music – Mrs. Zazzara by Loxbeats https://soundcloud.com/loxbeats Creative Commons — Attribution 3.0 Unported — CC BY 3.0 http://creativecommons.org/licenses/by/3.0/ Music promoted by Audio Library https://youtu.be/Ct2MXTilkdk

source