Menu
Is there a way to keep a string of text on one line, so that if the div width gets to small, the whole string will drop to the next line instead of half of it?
Example:
"Industry Updates - 8th September 2013" often this happens on mobile browers whereas with to smaller width, the ideal situation is that the whole date stays together giving:
"Industry Updates - 8th September 2013" So is there a tag to use or a css trick to achieve this? Thanks
289
Head to the Insert tab, click the Symbol drop-down arrow, and select “More Symbols.” In the Symbol window, click the Special Characters tab. Select “Nonbreaking Hyphen” in the list, click “Insert,” and then “Close.” You should then see your text adjust with the hyphenated word together on the same line.
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.
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.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
CSS
.nowrap { white-space: nowrap; } HTML
<span class="nowrap">Industry Updates -</span> <span class="nowrap">8th September 2013</span> Any element with white-space: nowrap stays on one line
89
You want to use a non-breaking space in your HTML markup instead of a normal space.
"Industry Updates - 8th September 2013" 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
