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/
Related
I'm trying to make a two column CSS table (tried HTML table too) with one row where the first column is one line of text and it expands to fit the content. The second column needs to be a single line of text that is right justified and expands left until it hits the first column and then becomes an ellipsis.
This first column is working with white-space: nowrap;. The second column is the issue:
When the content is longer than the second column max width, it will wrap. Once I add white-space: nowrap; it overflows and ignores the width, max-width and overflow: hidden;
Here is a JSFiddle showing what I'm getting vs. what I'm trying to get. Thanks!
https://jsfiddle.net/esodell1/oq59jkr3/10/
UPDATE
Thanks for the responses, but I found a way to accomplish this using flex box!
https://jsfiddle.net/esodell1/jdykzv5m/13/
So this is how the text-overflow technique works. There needs to be a defined width of it's parent or a closest parent. You'll need to defined a width for your cell such as:
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 85%;
text-align: right;
}
But you'll also have to limit your table since table naturally tries to expand as much as the content in its child requires by using table-layout:
.table {
display: table;
padding: 0.25rem;
table-layout: fixed;
width: 100%;
}
This will make the right column create the ellipsis when the cell reaches 85% of its available width. The problem you'll be faced with is dealing with the left column because you also have no-wrap set on it so that column might actually exceed 15% width and overlap with the right. The issue is both your column is trying not to wrap and fighting for table space, you'll need to apply the same text-overflow technique on the left column. See the the previous and last example here:
https://jsfiddle.net/bhL6sx0g/
To be honest if you're dealing with many columns with dynamic content like this that you don't want wrapping you might want to add a layer of JS on top to do some of your sizing for you else the best option is delegate the actual widths such as a 15/85 split and stick to it.
Edit:
Give width units in vw(viewport width). Notice changes in scss of table(width), first-child( width, min-width) and last-child(width, max-width).
This vw will behaved strangely in jsfiddle, try in .html only.
.table {
display: table;
padding: 0.25rem;
width:90vw;
.row {
display: table-row;
.cell {
display: table-cell;
border: 1px solid gray;
padding: 0.25rem;
&:first-child {
white-space: nowrap;
width:20vw;
min-width:20vw;
}
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 70vw;
max-width: 70vw;
text-align: right;
}
}
}
}
Previous
By max-width:100% it can stretch to take full size of parent. You need limit it to some percentage or pixels to achieve desired effect.
Removed width:100% as it was useless and changed max-width:200px
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* width: 100%; */
max-width: 200px;
text-align: right;
}
I have an example like this jsfiddle where I have a list of <a> element. Inside each <a> element I have a <span> and a <button>. What I would like to do is I want to align the button on the right, I do this by adding the class pull-right and it worked fine
<button class=" btt pull-right glyphicon glyphicon-chevron-right"></button>
, and I want to align the span and the button on the same line, but if I have a very long Name inside the span then the button is no longer on the same line with the span. How can I fix this problem?
You can set width and display property to the span elements like this:
.surveySummaryList a span {
width: calc(100% - 40px);
display: inline-block;
word-break: break-all;
}
and add rule for your buttons width like this:
.btt{
width: 30px;
}
I updated the FIDDLE
Use position: absolute; in your styling and set the buttons right styling to 0. This will place your button at an absolute position, according to your parental div.
.btt {
position: absolute;
right: 0;
}
Live example
This is an issue I have faced a few times and usually what I do is decide the maximum length I will allow this value to be and then truncate after that with ellipsis.
It is up to you but I think this is a good choice to make as it is defensive coding to keep your display neat no matter what the value.
Here is an example CSS class you can add to your span:
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I have the following problem: I am creating an inline-block element (.content) within a wrapper-div (.wrapper). If there is content in the .content-div, everything works just fine. But if I remove the content from the .content-div, a space gets added below the inline-block-div.
I am not sure why this happens and how to fix it correctly. Note that after manually removing all spaces and line-breaks in my code the problem persists, but setting the font-size to 0 helps.
Also, setting vertical-align: top to the .content-div helps. I am not sure why exactly.
Whats the best way of fixing it? Why does this happen?
Fiddle: https://jsfiddle.net/cjqvcvL3/1/
<p>Works fine:</p>
<div class="wrapper">
<div class="content">not empty</div>
</div>
<p>Not so much:</p>
<div class="wrapper">
<div class="content"></div>
</div>
.wrapper {
background-color: red;
margin-bottom: 20px;
/* font-size: 0; *//* this would fix it, but why? (problem persists after manually removing all spaces and breaks) */
}
.content {
display: inline-block;
height: 20px;
width: 200px;
background-color: green;
/* vertical-align: top; *//* this would fix it, but why? */
}
Update
I have put together a new fiddle. This should better illustrate my problem. How do I get rid of the green line below the textarea?
https://jsfiddle.net/cjqvcvL3/7/
<div class="content"><textarea>Some
Content</textarea></div>
.content {
display: inline-block;
background-color: green;
}
This happens because you specifically give width and height to the .content.
Have you considered using the :empty pseudo selector?
.content:empty {
display: none;
}
https://jsfiddle.net/cjqvcvL3/5/
Setting your the content display to block instead of inline-block fixes the problem.
.content {
display: block;
height: 20px;
width: 200px;
background-color: green;
/* vertical-align: top; *//* this fixes it */
}
This explains why setting vertical-align to top fixes the problem as well:
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell box.
Here is a working example: jsfiddle
To remove the gap, you have to surround the content div with a wrapper with font-size:0.
The reason is exained here: answer
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.
The most important part for this topic would be that the element itself get's formatted not just the content. Every inline-block element will be seen as atomic inline box and thus take up space.
.wrapper2 {
background-color: red;
margin-bottom: 20px;
font-size:0;
}
I'm quite new to CSS. I'd like to display a long line of text overflowing with ellipses. This jsfiddle demonstrates a working example.
However, note that if you extend the window, the text remains limited at 100px (due to the max-width: 100px) attribute. If I remove the max-width attribute, though, the text never shrinks:
I'd like the text to extend as much as possible without causing a line-break. i.e. this is how it should look for the various window widths:
How would I go about doing this?
this will do the trick.. you can use display: block; instead of display: inline-block; then add margin-right: 75px; so that the text will not overlap the button.
.one-line-only {
font-family: monospace;
display: block;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 75px; /*(you can set the value depends on your needs)*/
}
then add this css on your button, then add margin-top: -20px; to inline the button.
.b{
margin-top: -20px; /*(you can set the value depends on your needs)*/
float:right;
}
<span class="one-line-only"> Stuff to the left ---- Thisisareallylongthingwhichshouldbestoppedatsomepointforsure</span>
<button class='b'>Stuff right</button>
JSFIDDLE DEMO
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