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
Related
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>
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
p{
width: 300px;
margin: 0 auto;
}
span{
display: inline-block;
}
.left{
width: 40%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<p class="test">
<span class="left">TestTestTestTest</span>
<span class="right">Test</span>
</p>
And then it will display like
this,
I think the reason why display like this maybe the property 'overflow: hidden' created a bfc, so I set the property 'overflow: hidden' or 'float: right' for '.right', and then '.right' align to '.left'.
but I've seen description of BFC from MDN, it says that display:inline-block will creating a BFC, So the BFC of each span tags should already be created because of the css rule span {display: inline-block}, but why they are not align before I set the properties for '.right' ?
finally,please don't focus on my poor English, I just wanna find the answer for the question I've met, and I think I will get it by this way . Thank you!
O(∩_∩)O~
Just give vertical-align: top; to span. Because inline-block default vertical-align is baseline.
p{
width: 300px;
margin: 0 auto;
}
span{
display: inline-block;
vertical-align: top;
}
.left{
width: 40%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<p class="test">
<span class="left">TestTestTestTest</span>
<span class="right">Test</span>
</p>
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 have a long text inside a div with defined width:
HTML:
<div>Stack Overflow is the BEST!!!</div>
CSS:
div {
border: 1px solid black;
width: 70px;
}
How could I force the string to stay in one line (i.e., to be cut in the middle of "Overflow")?
I tried to use overflow: hidden, but it didn't help.
Try this:
div {
border: 1px solid black;
width: 70px;
overflow: hidden;
white-space: nowrap;
}
Use white-space:nowrap and overflow:hidden
http://jsfiddle.net/NXchy/8/
In your CSS section, use white-space: nowrap;.
div {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div>Stack Overflow is the BEST!!!</div>
I made a fiddle:
http://jsfiddle.net/audetwebdesign/kh4aR/
RobAgar pointed out white-space:nowrap.
A couple of things here: You need overflow: hidden if you don't want to see the extra characters poking out into your layout.
Also, as mentioned, you could use white-space: pre (see EnderMB), keeping in mind that pre will not collapse white space whereas white-space: nowrap will.
div {
display: flex;
flex-direction: row;
}
was the solution that worked for me. In some cases with div-lists, this is needed.
Some alternative direction values are row-reverse, column, column-reverse, unset, initial, and inherit. Which do the things you expect them to do.
Add this to your div:
white-space: nowrap;
http://jsfiddle.net/NXchy/1/
Give this a try. It uses pre rather than nowrap as I would assume you would want this to run similarly to <pre>, but either will work just fine:
div {
border: 1px solid black;
max-width: 70px;
white-space: pre;
}
http://jsfiddle.net/NXchy/11/
None of the previous answers worked for me.
There are instances where regardless what you do, and depending on the system (Oracle Designer: Oracle 11g - PL/SQL), divs will always go to the next line, in which case you should use the span tag instead.
This worked wonders for me.
<span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)">
<input type="radio" id="radio4" name="p_verify_type" value="SomeValue" />
</span>
Just Your Text ||
<span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span>
in span you need to add :
{ display: block; }
span {
width: 70px;
border: 1px solid black;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<span>Stack Overflow is the BEST!!!</sapn>
Try setting a height, so the block cannot grow to accommodate your text, and keep the overflow: hidden parameter.
Here is an example of what you might like if you need to display two lines high:
div {
border: 1px solid black;
width: 70px;
height: 2.2em;
overflow: hidden;
}