CODEWITHSUNDEEP
htmlcssexpressionengine
The Hawk
The Hawk

Reputation: 1568

Dealing with CSS Text Overflow

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.

Upvotes: 1

Views: 4808

Answers (3)

s4nji
s4nji

Reputation: 455

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

Upvotes: 0

Mitch Springer
Mitch Springer

Reputation: 16

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

Upvotes: 0

Vadim S
Vadim S

Reputation: 358

You can try to use this:

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

Upvotes: 4

Related Questions