I have a navigation that is generated dynamically from Expression Engine CMS. There are 10 main navigation items that I need to fit across the screen. Some of titles, however, are long and wrap to the next line or get cut off. I increased the height of the li element to allow two rows but it doesn't look as good. Should be just one row. Is there a way with CSS to change the length or have it not cutoff abruptly? I tried text-overflow but it wasn't recognized by my Mozilla Firefox. I could change the title, but then the page titles would not be complete.
Add a comment
|
3 Answers
You can try to use this:
text-overflow: ellipsis;
white-space: nowrap;
-moz-white-space: nowrap;
overflow: hidden;
Comments
What about dynamically changing the font size based on screen size? Something like that is discussed here using media queries Responsive Font Size
Comments
This CSS property doesn't force an overflow to occur; to do so and make text-overflow to be applied, the author must apply some additional properties on the element, like setting overflow to hidden.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
Text can overflow for example when it is prevented from wrapping (e.g. due to 'white-space: nowrap' or a single word is too long to fit).
http://dev.w3.org/csswg/css-ui-3/#text-overflow
To have text-overflow property used, the text element must first overflow. This can be done by preventing the element from wrapping the overflowed content to a new line, which can be done by setting white-space: nowrap. Additionally overflow must be set to hidden.
The following is a snippet about interactions between text-overflow and white-space:
body {
font-size: 9px;
font-family: Helvetica, Arial, sans-serif;
}
p {
font-size: 16px;
width: 100px;
height: 16px;
line-height: 16px;
overflow: hidden;
margin: 10px 0 0;
text-overflow: ellipsis;
}
.a { white-space: normal; }
.b { white-space: nowrap; }
.c { white-space: pre; }
.d { white-space: pre-wrap; }
.e { white-space: pre-line; }<p class="a">Lorem ipsum dolor sit amet</p>
text-overflow: ellipsis; white-space: normal
<p class="b">Lorem ipsum dolor sit amet</p>
text-overflow: ellipsis; white-space: nowrap
<p class="c">Lorem ipsum dolor sit amet</p>
text-overflow: ellipsis; white-space: pre;
<p class="d">Lorem ipsum dolor sit amet</p>
text-overflow: ellipsis; white-space: pre-wrap
<p class="e">Lorem ipsum dolor sit amet</p>
text-overflow: ellipsis; white-space: pre-line