Text overflow in an arrow shaped div - html

Question

This is the HTML:
<div class="arrow">
i need to hide the overflown text which comes out of the div
</div>
and the corresponding CSS is:
.arrow {
width: 5%;
position: relative;
}
.arrow:before {
content: " ";
width: 0;
position: absolute;
left: -0.58em;
border-style: solid;
border-width: .585em .585em .585em 0;
}
I need to hide the overflowing text.
If I apply overflow:hidden the pointed triangle disappears instead of the text.
Can someone please help me with this.

Answer 1

The following might work if you wrap your content in an extra element:
<div class="arrow">
<span>i need to hide the overflown
text which comes out of the div</span>
</div>
For the CSS:
.arrow {
width: 5%;
position: relative;
}
.arrow:before {
content:"";
width: 0;
position: absolute;
left: -0.58em;
border-style: solid;
border-width: .585em .585em .585em 0;
border-color: red yellow green blue;
}
.arrow span {
width: auto;
display: block;
white-space: nowrap;
overflow: hidden;
}
I tweaked the border colors since the arrow shape was not obvious, but you can fix that easily enough.
I wrapped the text in a span, set white-space: nowrap to get the text to form a single line and then set overflow: hidden to hide any text wider than the width. Set display: block or else use a div instead of a span.
Fiddle demo: http://jsfiddle.net/audetwebdesign/nukeL/

Answer 2

You can do this without adding any more elements to your html:
Added white-space: nowrap to keep the text from wrapping
Added padding-left: 1em to make room for the arrow
Set left: 0 for your arrow
and fixed the arrow display...
CSS
.arrow {
white-space: nowrap;
width: 10%;
position: relative;
overflow: hidden;
padding-left: 1em;
}
.arrow:before {
content:" ";
width: 0;
height: 0;
position: absolute;
left: 0;
border-right: 0;
border-bottom: .585em solid transparent;
border-top: .585em solid transparent;
border-left: .585em solid black;
}
Demo

Answer 3

Add a container inside the arrow to constrain your text (assuming fixed height).
HTML
<div class="arrow">
<div class="container">
I need to hide the overflown text which comes out of the div.
</div>
</div>
CSS
.container {
height: 30px; /** assuming fixed height here. **/
max-height: 30px;
overflow: hidden;
}
JSFiddle example: http://jsfiddle.net/xBM88/

Answer 4

I don't find any pointed triangle in your fiddle.
But I would suggest you to take a look at text-overflow
overflow:hidden;
text-overflow:ellipsis; //don't hide content, instead render an ellipsis ("...")
Check this JSFiddle