Menu
I'm looking for a way to add a line break if the screen width is smaller than X.
Half of the text should stay on the next line, instead of just one word, on smaller screen width.
Normal view on big screens:
Normal view on smaller screens:
Wanted result on smaller screens:
Thinner text is not related
I'm looking for a way to do it with CSS.
609
You could simply add a class to the BR tag and set it to be display:none by default. I've suggested static rather than block because I don't think that a BR tag is display block by default so probably best to simply go with static. Show activity on this post.
To add spacing between lines or paragraphs of text in a cell, use a keyboard shortcut to add a new line. Click the location where you want to break the line. Press ALT+ENTER to insert the line break.
A line-break can be added in HTML, using only CSS, by employing the pseudo-class ::after or ::before . In the stylesheet, we use these pseudo-classes, with the HTML class or id, before or after the place where we want to insert a line-break. In myClass::after : Set the content property to "\a" (the new-line character).
You may use as many media queries as you would like in a CSS file. Note that you may use the and operator to require multiple queries to be true, but you have to use the comma (,) as the or operator to separate groups of multiple queries. The not keyword can be used to alter the logic as well.
Use @media queries with span element and turn them to display: block; as they are inline by default...
Demo (Resize the fiddle window)
div {
font-size: 30px;
font-family: Arial;
}
@media screen and (max-width: 400px) {
div span:last-of-type {
display: block;
color: #f00;
}
}
@media screen and (max-width: 300px) {
div span:nth-of-type(2) {
display: block;
color: #00f;
}
}
Explanation: Here, I've simply wrapped each word with the span element which is inline by default.. So what I do is, I turn them to display: block; if the screen resolution is less than some px.
You can make these flexible by applying display: block; and display: inline-block; whichever suits your requirements.
If screen size is maximum of 400px
If screen size is maximum of 300px
Changing colors so that you can see the effect.
93
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
