My text is not cutting off with an ellipsis when it overflows the div.
Usually this is very simple to accomplish, simply add the text-overflow: ellipsis and overflow-x: hidden CSS properties to text's container.
It works if you change <p> to <span>. After googling, it looks like both block and inline-block elements support text-overflow: ellipsis. Why is this happening then?
http://jsfiddle.net/p4j4326c/1/
HTML:
<div>
<p>Test text that is going to overflow</p>
</div>
CSS:
div {
width: 100px;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid red;
}
Looks like if you modify the p tag it works:
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
jsfiddle
Also this comes from MDN...looks like it applies for the block element:
"This property only affects content that is overflowing a block container
element in its inline progression direction."
Related
I am having trouble producing an ellipsis effect when a series of span children overflows its parent container. I have set up the parent container to have all the necessary attributes for an ellipsis (nowrap, display, hidden overflow, and of course text-overflow as ellipsis) but with my current setup, my spans seem to not want to ellipse on an overflow.
...The elements are structured like this
<div class="outer">
<span class="genre">Adventure</span>
<span class="operator">OR</span>
<span class="genre"> Comedy</span>
</div>
...And the corresponding CSS:
.outer {
max-width: 90px;
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
}
.operator {
width: 20px;
height: 22px;
float: left;
}
.genre {
float: left;
}
While the desired effect is an ellipsis, what I'm seeing is the overflowed elements wrapping around instead. I was under the impression that any sort of wrapping would be prevented through my display as inline-block, as well as nowrap, but that doesn't seem to be the case here. This seems to be due to floating the elements, but what I've been looking for is a solution that includes these floats in this case. Here is a jsfiddle of my current situation: https://jsfiddle.net/k91wzsq3/2/ - And The screenshot below is the effect I'm looking for.
Any help would be greatly appreciated, thank you in advance!
You don't need to use the float property in this case, it will just mess up your element. You only needed to tell the .outer element that it is going to be inline, just like you did but then by adding the floats it broke everything. You only need this on you CSS
.outer {
max-width: 90px;
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
}
Fiddle here https://jsfiddle.net/zgranda/0Ls6fw4j/14/
I have a div inside of a list element. For some reason, the div is not on the same line as the list style bullet when overflow is hidden on the div. Any thoughts?
HTML:
<ul><li><div>Here is some long text</div></li></ul>
CSS:
ul {width:150px;}
li {list-style-type:square}
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Fiddle: https://jsfiddle.net/scottchantry/supcsayt/
The div is a block element, which makes it take up a new line. Adding display:inline to your div should do the trick. https://jsfiddle.net/supcsayt/2/
div {
display: inline;
}
If I were to have a div with a specified width, how would I prevent a new line when the content exceeds the parent div's width?
Here is my HTML code:
<div style="width: 200"><p>Verrrrrrry loooooooong pppppppp ellllemmmmmmmmentttt</p></div>
Any help would be appreciated.
Thanks!
You could simply use:
div {
white-space: nowrap;
overflow: hidden; /* assuming you don't want the <div> to stretch to accommodate */
} /* the width of the text */
div {
width: 300px;
white-space: nowrap;
overflow: hidden;
border: 2px solid rgba(0,0,0,0.5);
}
<div>This element has some text longer, by far, than the width of the page in which it is contained; it would be lorem ipsum but, honestly, I'd rather spend a few moments typing randomly, but continuously, than go find myself some of that lorem-goodness...</div>
References:
white-space (MDN).
white-space (W3.org, CSS 2.1).
Use white-space: nowrap:
div{
overflow: hidden; /* Prevent text from overflowing div */
white-space: nowrap; /* Prevent text from using more than one line */
}
Try this CSS:
overflow:hidden;
white-space:nowrap;
Should do the trick
I'm working with this jsfiddle. I would like the <p>Super long words here</p> to look like Super lon... instead of showing the full text. I tried adding
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
But it didn't work. How can I get my overflow text to end in an ellipsis?
You have to specify a width to achieve this effect, like this:
.pClass p {
margin: 0 !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:20px;
}
Fiddle
<div style="display:inline-block;width:100px;">
very long text
</div>
any way to use pure css to cut the text that is too long rather than show on next new line and only show max 100px
You can use:
overflow:hidden;
to hide the text outside the zone.
Note that it may cut the last letter (so a part of the last letter will still be displayed). A nicer way is to display an ellipsis at the end. You can do it by using text-overflow:
overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;
<div class="crop">longlong longlong longlong longlong longlong longlong </div>
This is one possible approach i can think of
.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}
This way the long text will still wrap but will not be visible due to overflow set, and by setting line-height same as height we are making sure only one line will ever be displayed.
See demo here and nice overflow property description with interactive examples.
.crop {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
width:100px;
}
http://jsfiddle.net/hT3YA/
Why not use relative units?
.cropText {
max-width: 20em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Below code will hide your text with fixed width you decide. but not quite right for responsive designs.
.CropLongTexts {
width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Update
I have noticed in (mobile) device(s) that the text (mixed) with each other due to (fixed width)... so i have edited the code above to become hidden responsively as follow:
.CropLongTexts {
max-width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
The (max-width) ensure the text will be hidden responsively whatever the (screen size) and will not mixed with each other.
.cut_text {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="cut_text">
very long text
</div>