I have a div inside of a list element. For some reason, the div is not on the same line as the list style bullet when overflow is hidden on the div. Any thoughts?
HTML:
<ul><li><div>Here is some long text</div></li></ul>
CSS:
ul {width:150px;}
li {list-style-type:square}
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Fiddle: https://jsfiddle.net/scottchantry/supcsayt/
The div is a block element, which makes it take up a new line. Adding display:inline to your div should do the trick. https://jsfiddle.net/supcsayt/2/
div {
display: inline;
}
Related
I am having trouble producing an ellipsis effect when a series of span children overflows its parent container. I have set up the parent container to have all the necessary attributes for an ellipsis (nowrap, display, hidden overflow, and of course text-overflow as ellipsis) but with my current setup, my spans seem to not want to ellipse on an overflow.
...The elements are structured like this
<div class="outer">
<span class="genre">Adventure</span>
<span class="operator">OR</span>
<span class="genre"> Comedy</span>
</div>
...And the corresponding CSS:
.outer {
max-width: 90px;
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
}
.operator {
width: 20px;
height: 22px;
float: left;
}
.genre {
float: left;
}
While the desired effect is an ellipsis, what I'm seeing is the overflowed elements wrapping around instead. I was under the impression that any sort of wrapping would be prevented through my display as inline-block, as well as nowrap, but that doesn't seem to be the case here. This seems to be due to floating the elements, but what I've been looking for is a solution that includes these floats in this case. Here is a jsfiddle of my current situation: https://jsfiddle.net/k91wzsq3/2/ - And The screenshot below is the effect I'm looking for.
Any help would be greatly appreciated, thank you in advance!
You don't need to use the float property in this case, it will just mess up your element. You only needed to tell the .outer element that it is going to be inline, just like you did but then by adding the floats it broke everything. You only need this on you CSS
.outer {
max-width: 90px;
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
}
Fiddle here https://jsfiddle.net/zgranda/0Ls6fw4j/14/
I am trying to create a image slider based on a <ul>.
The problem is that the <li> are not displayed inline-block.
I already tried this:
.slider ul li {
display: inline;
float: left;
white-space: nowrap;
}
But that doesn't work. I also tried display:inline-flex; but no result.
An other thing I tried is to replace the <li> by a <div> but that to without any result.
Jsfiddle
I normally works so I don't know why it doesn't work this time.
So can somebody help me fixing this problem?
You need to add white-space: nowrap to the parent element; in this case, the ul.
In addition, the white-space property won't have an effect on the floated elements, therefore you need to remove float: left.
Updated Example
.slider ul {
white-space: nowrap;
}
.slider ul li {
display: inline-block;
}
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 a problem with fixed width table cell and span elements (with additional elements inside, text + button). I don't want those span contents to be wrapped (span elements are placed in that cell), like this:
<td style="width: 250px;">
<span>Test<button>Remove</button></span>
<span>Test<button>Remove</button></span>
...
</td>
How to achieve this? I tried with white-space but with no success (span contents don't wrap but table cell is not fixed width anymore...) (http://jsfiddle.net/dvjq4/).
You can simply set your span to display block:
http://jsfiddle.net/hQCwW/1/
.ex-element {
display: block; }
Try wrapping the table in some wrapper div and then set overflow:auto and white-space: nowrap; on the div.
FIDDLE
CSS
.wpr {
width: 250px;
overflow: auto;
display:block;
white-space: nowrap;
border: 1px solid black;
}
I've found a solution (inspired by Matthew Trow).
Span element class (in example .ex-element) must look:
.ex-element {
display: inline-block;
}
Try removing white-space: nowrap; from the span element.
.ex-element {
/* white-space: nowrap; */
}
Fiddle
I want distribute some links in columns. I use this css:
.cols{
float: left;
width: 25%;
white-space: nowrap;
}
HTML:
<div class="CRMP_WP_QUICKADS_cols">
text...
</div>
The image show the resulting output:
How can avoid overlapping?
Possible solutions:
You could hide the last part: overflow: hidden; text-overflow:
ellipsis;
You could increase the width of the divs
Set overflow to hidden to cutoff any content that exceeds the width of the column:
.cols {
/* ... */
overflow:hidden;
text-overflow:ellipsis; /* Hint that some text is hidden */
}
3 options
Increase width
Remove the width declaration on the divs (if you want them to expand to fit the text)
set overflow: hidden on the div if you want to hide the text
You must increase the width of the columns to compensate for the overflowing text.