We have the following configuration for long text ellipsis (...):
.text-ellipsis {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
But this feature doesn't seem to work properly, i.e. long text doesn't become shorter with appropriate ending '...'
What can be fixed here?
You can try to set some width to the element. You can apply width either in px or in %.
.text-ellipsis {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
width: 150px;
}
<div>
<p class="text-ellipsis">Hello Stackoverlow Users</p>
</div>
Related
I have < p > tag and text there.
Css:
p {
max-height: 250px;
}
I want to make my text hide last word which can't fit in 250px of height and change it to "...".
I have tried it:
p {
white-space: nowrap;
overflow: hidden;
text-overflow: hidden;
}
It worked but not as I want. It hide word which can't fit in the first line, but not the the 250px of height. Is there anyway to do so? Thanx in advance.
You need to use the overflow-y property to hide the y-axis.
More about overflow-y.
CSS
p {
max-height: 250px;
width: 100px;
white-space: nowrap;
overflow-y: hidden;
}
HTML
<p>Some text goes here</p>
Try this it will help sure
p{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-height: 250px;
width: 150px;
}
I have following structure in dropdown suggestions for my autocomplete plugin
<div>
<svg>//some things here</svg>
<span>My long text</span>
<span>Some short text</span>
</div>
The div has following CSS properties -
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%
The span has following properties -
float: left;
I am unable to understand where it went wrong and have tried almost all SO solutions answered in similar problems till date. A desperate callout!
Update: http://codepen.io/shreeshkatyayan/pen/wzPYvO CSS structure - non-working for obvious reasons.
Here are two examples which may help.
Add the overflow to the span instead of the div which will give each span the ellipsis property.
div.one {
display: inline-block;
width: 100%;
}
div.one span {
float: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 75px;
margin-right: 10px;
}
Or to give the div the ellipsis property instead of the span, remove float: left from the span and add a width to the div.
div.two {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}
div.two span {
margin-right: 10px;
//float: left;
}
updated jsfiddle: https://jsfiddle.net/75rmaqwb/1/
There are also several jquery plugins that deal with this issue, but many do not handle multiple lines of text. Following works:
http://pvdspek.github.com/jquery.autoellipsis/
http://dotdotdot.frebsite.nl/
http://keith-wood.name/more.html
http://github.com/tbasse/jquery-truncate
I have been attempting to get ellipsis to appear when text is two long, on two spans that are next to each other using display: inline-block:
Here is the simplified CSS in a fiddle:
https://jsfiddle.net/IQAndreas/fffo84nq/1/
In fact, I can't even overflow: none to show up properly. Those two span elements have given me nothing but trouble.
You need to add those style to menu-element
.menu-element {
background-color: #DDDDDD;
width: 100%;
cursor: pointer;
overflow:hidden;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Updated fiddle
Need to specify width for ellipsis to work
#palette-menu .palette-name {
height: 100%;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
width: 66%;
}
DEMO
I have the following container of text:
<div class="cardTitles">
<div class="title">
<div class="titleContent">
<i class="fa fa-star-o"></i>
<b>Some long long long title here</b>
</div>
</div>
... title divs ...
</div>
css:
.cardTitles {
width: 100%;
height: 100%;
}
.title
{
position: relative;
padding-top: 8px;
padding-bottom: 8px;
}
I want to make text full width + text-overflow: ellipsis. So when I resize browser all title divs should be full 100% width of the parent cardTitles with cut text to three dots at the end.
I found that this is possible using flex. Here is the possible answer:
.parent-div {
display: flex;
}
.text-div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
But this doesn't work for me. Parent container stops resizing when it reach the max length of some child title.
You can find an example here: http://88.198.106.150/tips/cpp/
Try to resize browser and look at title with text: What does it mean that a reference must refer to an object, not a dereferenced NULL pointer. I need to make it overflow ellipsis.
Try this out:
.titleContent {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Here's and updated jsFiddle
No Flex but could work also ... try it.
.element {
display: table;
table-layout: fixed;
width: 100%;
}
.truncate {
display: table-cell;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
text-overflow ellipsis with 100% width
The width needs to be added in pixels, percentage wont work along with other three properties as given below:-
.text-ellipsis{
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#div1 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
}
#div2 {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.
This div uses "text-overflow:clip":
This is some long text that will not fit in the box
This div uses "text-overflow:ellipsis":
This is some long text that will not fit in the box
I would like to cut off some long text using an ellipsis.
However, with my current implementation, it doesn't include extra words that would cause it to go beyond the div and does not show ellipsis to indicate that the text is cut off.
What am I doing wrong?
http://jsfiddle.net/sw6Sp/6/
<div class="testWrap">This is some very long text that I want to cut off </div>
.testWrap{
max-width: 125px;
height:15px;
overflow: hidden;
text-overflow:ellipsis;
border: 1px solid black;
}
Just use text-overflow: ellipsis along with white-space: nowrap.
Updated Example
.testWrap {
width: 125px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Adding the css-rule white-space: nowrap; should solve your problem.
<div class="testWrap" style="
max-width: 125px;
height:15px;
overflow: hidden;
text-overflow:ellipsis;
border: 1px solid black;
white-space: nowrap;
">This is some very long text that I want to cut off </div>
If you want to use ellipsis without white-space: nowrap, use these CSS rules
white-space: pre-line;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;