<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>
Related
I have table that sometimes have long strings as values.
How can i show the entire content of a tablecell if the overflowing content his hidden?
I'm thinking the cell should be expand while overlapping adjacent cells without displacing them.
Currently im using this css:
table{
table-layout: fixed;
margin-top: 24px;
th{
white-space: normal;
word-wrap: break-word;
}
td{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
td:hover{
overflow: visible;
z-index: 1;
background-color: grey;
}
}
This does make the overflowing text visible and overlapping adjacent cells. But the background/cell wont follow.
Thanks!
This is what I got for your situation: jsFiddle
First of all, I changed the css so that the table selector does not contain the other selectors. (note that this is not needed if you are using SASS or LESS as pointed out in the comments)
table{
table-layout: fixed;
margin-top: 24px;
} <--- place it here instead of at the end of the css rules for the table
th{
white-space: normal;
word-wrap: break-word;
}
And then I also adjusted the css rules for 'td' and 'td:hover':
td{
max-width : 50px;
white-space : nowrap;
overflow : hidden;
}
td:hover{
overflow: visible;
z-index: 2;
background-color: grey;
max-width:initial;
}
Hope this is what you wanted to achieve.
EDIT
After some comments and knowing you don't want the adjacent cells to move, I found this jsFiddle (this one is still a bit jumpy on hover, so maybe someone else knows how to fix this; I don't see how to solve that right now)
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
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."
I have an HTML table, with headings in the first column and data in the later columns. It has to fit into a certain width on page, but the all cells are of variable length. Is there any way I can set the first column to shorten itself:
text-overflow: ellipsis;
white-space: nowrap;
while leaving the other columns at their full width to show all the data? I have created a demonstration here: http://jsfiddle.net/Xsanda/uBrV7/
You can do this, but only if you are willing to set a max-width of the cell. The width can't be completely dynamic and still truncated.
http://jsfiddle.net/uBrV7/2/
td:first-child {
max-width: 30px;
overflow: hidden;
text-overflow: ellipsis;
}
You can use max-width: Fiddle
td:first-child {
text-overflow: ellipsis;
overflow: hidden;
max-width: 100px; /* Change this to fit your needs */
}
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