Menu
I have a div that contains an image and text. If the text takes up only one line, I want the text to be vertically aligned to the center of the image. If the text takes up more then one line of text, I want the top of the text to be aligned with the top of the image.
Does CSS have a way of detecting when text wraps to the next line?
616
The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.
There are two methods to force inline elements to add new line. Using display property: A block-level element starts on a new line, and takes up the entire width available to it. Using carriage return character (\A): We can add a new-line by using the ::before or ::after pseudo-elements.
A hard break ( ‐ ) will always break, even if it is not necessary to do so. A soft break ( ­ ) only breaks if breaking is needed. You can also use the hyphenate-character property to use the string of your choice instead of the hyphen character at the end of the line (before the hyphenation line break).
No, CSS can't detect such things. It is only a styling language and has no potential for making decisions.
160
No, this is not possible. However, it is possible to prevent words from "wrapping," or going over to the next line. although this functionality is not fully supported by all browsers. This is called word-wrap.
31
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
