I'm with a simple problem with text-overflow.
I can ellipsis my text, but the text won't fill the div entirely.
Here's the demo in jsfiddle: Fiddle
I thought that this piece of code would do the trick but I'm wrong.
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
I've seen various topics related like CSS text ellipsis when using variable width divs, Can't get "text-overflow: ellipsis;" to work, but none of them worked for me.
Add width to the element for ellipsis to work.
It works when content exceed the width of the container. It would not work without specifying the width of the container.
Try this
Jsfiddle: http://jsfiddle.net/manublueheart/D4FKm/3/
The trick is adding -webkit-box-orient: vertical; to your css
p.first{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 16px; /* fallback */
max-height: 32px; /* fallback */
}
Related
I was trying to implement horizontal scrolling, after a lot of searching I found the solution using
.wrapper{
overflow: auto;
}
.innerWrapper{
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
This gave me the solution I needed for adding new div elements which adjust horizontally, But what if I have a huge word like #tagsomething, I want the word to be broken like
.tagLink{
word-wrap: break-word;
}
this doesn't work as I understand that I am using nowrap on the whole container, is there a way around this?
Check out the code: https://jsfiddle.net/v5s5ema8/2/
You can simply override it on the child elements.
.tags {
white-space: normal;
}
Updated fiddle.
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."
<div style="width:200px; margin:0 auto;"> 01234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921.........
</div>
The above code is showing a long scrollbar. I want to keep it inside the div's declared width (width: 200px;) without scrolling.
I have tried float, display, position, overflow, but nothing works here.
Alternative you can use overflow-wrap: break-word;. Also avoid inline styles.
css
div{
width: 200px;
margin: 0 auto;
overflow-wrap: break-word;
word-wrap: break-word; /* Firefox support */
}
Fiddle
Try this:-
word-wrap: break-word;
DEMO: http://jsfiddle.net/dwebexperts/thyD9/
<div style="width:200px; margin:0 auto; word-wrap:break-word;"> 01234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921.........
</div>
JSFiddle: http://jsfiddle.net/Emr84/
Try this:
div {
width:200px;
margin:0 auto;
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
Note: Avoid inline styling.
Demo
Try with these CSS rules
white-space: nowrap; //keep the text on one line
overflow: hidden; //prevent the text from being shown outside the border
text-overflow: ellipsis; //cut off text with an elipsis
Use text-overflow: ellipsis;.
Full explanation: http://quirksmode.org/css/user-interface/textoverflow.html
for me following worked, my div was inside a scrollable parent div, just add to your child or content div
div{
white-space: normal;
}
OR
div{
white-space: pre-wrap;
}
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>