I've adapted jQuery UI MultiSelect Widget so that the text would show all selected labels, but if too many elements are selected to display, the text would be trimmed and ellipsed. I've done it so:
.ui-multiselect .selected-text {
display: block;
max-width: 190px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
The only things that I don't like in that solution is that I had to set display: block to the element (span). Without it, the width parameter was ignored and the span expanded to the text size.
Is it possible to get ellipsis to work with inline elements (without changing display to block)? If so, how to achieve that?
There is a display option that works as a half-way house between inline and block, designed for exactly this kind of situation...
it's called
display:inline-block;
Use this instead of block, and your element will still flow in your content as if it were inline, but will act as a block for its contents, which means your ellipsis should work.
You cannot apply text-overflow to inline elements.
http://dev.w3.org/csswg/css-ui/#text-overflow
Related
Overflow doesn't appear to be working when I use display: inline. I need to have the text inline, because it's something that appears at the top right of the webpage with "Hello," in front of it and a drop down arrow behind the name. If I remove the display: inline, the overflow works, but then the word in front and the image behind the name drops to a new row. I tried using inline-block, but that causes the text to actually wrap, though it's hidden, the name looks like I superscript it.
How can I make this work property?
div.actualName {
display: inline;
width: 40px;
height: 20px;
overflow: hidden;
}
This is
<div class="actualName">Bobby Joe Sanders</div>computer.
<br/>
Use inline-block but add the vertical-align:top rule. The default vertical alignment for inline elements is baseline.
div.actualName {
display: inline-block;
width: 40px;
height: 20px;
overflow: hidden;
vertical-align:top;
}
This is
<div class="actualName">Bobby Joe Sanders</div>computer.
<br/>
Using a styled span might be more useful in this particular example versus applying a div and class to style a few words in your line of text. Spans are more similar to in-line elements while divs are more like block elements. Let me know if it helps! Good luck.
I want the width of a div element to be equal to the width of the content inside it, and also (and more importantly) that any content after this div does not start to the right of the div(as though the div was float:left;), but display below the current div.
I know one way is that after this div, I create another empty div and set clear:both;, but in my case that would not be very preferable.
I think that the following may be close to what you need:
The HTML demo code is:
<div>
Some text may be before the element.
<div id="info">This is my bible!</div>And some text may follow. the element.
</div>
And the CSS styles are:
#info {
display:inline;
background-color:#CFFF9F;
color:black;
font-weight:normal;
border:black solid 1px;
}
#info:after {
content:"\A";
white-space: pre;
}
Fiddle reference: http://jsfiddle.net/audetwebdesign/6FNQc/
Explanation of How This Works
Use :after to generate some content (known as a pseudo-element in CSS). The "\A" is interpreted as a line break (linefeed) provided that the white space is preserved, hence you need to set white-space: pre. Finally, the element has to be inline, hence display: inline.
Related References:
CSS to line break before/after a particular `inline-block` item
To learn more about "\A" (linefeed), see:
http://www.w3.org/TR/CSS21/syndata.html#strings
A very simple task in hand.. but my browser is laughing on my face with my futile attempts.
How do I style a div class just around the text
So I am using jinja on backend and my html looks like this
<div class="content">
<pre> {{contents}}</pre>
</div>
and my css is
div.content {
background-color: #add8e6;
}
But what is happening is.. if "content" is half the line.. this styling is running across the whole horizontal line..
I just want to gracefully wrap the color across the text rather than whole horizontal page.
When I try
display: inline;
all the background color vanishes.
Use display:inline-block
div.content {
background-color: #add8e6;
display:inline-block
}
DEMO
Difference between inline and inline-block
inline-block - This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline - This value causes an element to generate one or more inline boxes.
Try this:
div.content * {
background-color: #add8e6;
}
This will apply the style to all the elements within the div block.
This doesn't occur in Chrome. I am trying to implement an Ellipsis for the nested element. Has anyone else come across this and, if so, were you able to work around?
<span>bar <span class="foo">foo</span> bar</span>
span.foo {
display: inline-block;
overflow: hidden;
}
Fiddle
bar <span class="foo">foo</span> bar
span.foo {
display: inline-block;
text-decoration: inherit;
overflow: hidden;
}
Fiddle
Add vertical-align: top where you have display: inline-block.
This is due to the specification on overflow, which works only on block element and how line-height work.
Your outer span is by default display:inline. An inline element should not contains block elements. Although, setting it to display:block won't fix the problem.
The problem is the baseline for the text (outer element) is the same for the box of the inner element. So the box sit at the same height it should start the text (which leave a bit of white space underneat).
Anyway, it might be easier to understand with a demo.
If you set the line-height of the inner-span to lower than the text actual height, the box will conserve its size. Of course thirtydot solution is also valid.
I'm trying to eliminate any overflow from a span that isn't matching another.
This is what I'm dealing with. http://jsfiddle.net/D2WPW/12/
So the .graph span isn't matching the .text span's width. I thought overflow: hidden; would do the trick. I guess not. Am I going about this the wrong way?
Any insight and help would be greatly appreciated. Thank you!
A span tag will take up as much room as needed. If you look closely you are inserting a canvas element in .graph with an inline style that explicitly sets the width to 116px.
Perhaps instead you should make the width of the canvas element dynamic and set it equal to the width of the adjacent .text span.
The .text elements are not inside the .graph elements, so there's no reason that overflow: hidden on .graph should clip .text.
What you should be doing is setting a static width as well as overflow: hidden and text-align: justify on the elements which contain both the graphs and the texts: http://jsfiddle.net/D2WPW/26/
You will probably also want white-space: nowrap to prevent too-long text from wrapping to the next line.