Menu
I have a long text inside a div with defined width:
HTML:
<div>Stack Overflow is the BEST!!!</div> CSS:
div { border: 1px solid black; width: 70px; } How could I force the string to stay in one line (i.e. to be cut in the middle of "Overflow")?
I tried to use overflow: hidden, but it didn't help.
607
If you want to limit the text length to one line, you can clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.
Set size and make inline Because they're block elements, when reducing the size of Div one to make room for the other div, you're left with space next to Div one and Div two below Div one. To move the div up to the next line both div's need to have the inline-block display setting as shown below.
To get all elements to appear on one line the easiest way is to: Set white-space property to nowrap on a parent element; Have display: inline-block set on all child elements.
Approach 1: In this approach, we have set the display: flex and flex-direction: row to the parent div of all the div elements. Due to the flex-direction: row property all the elements inside the parent div will be shown in a single row.
Try this:
div { border: 1px solid black; width: 70px; overflow: hidden; white-space: nowrap; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
