Dealing with CSS Text Overflow

Question

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.

score 4 · Answer 1 · answered Apr 09 '15 at 13:47

4

You can try to use this:

text-overflow: ellipsis;
white-space: nowrap;
-moz-white-space: nowrap;
overflow: hidden;

answered Apr 09 '15 at 13:47

Vadim S

358
1
15

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

What about dynamically changing the font size based on screen size? Something like that is discussed here using media queries Responsive Font Size

edited May 23 '17 at 12:06

Community

1
1

answered Apr 09 '15 at 13:58

Mitch Springer

16
1

score 0 · Answer 3 · answered Apr 09 '15 at 14:09

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

Dealing with CSS Text Overflow

3 Answers3