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
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'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 a drop down inside a table cell. On a click, the dropdown expands to show the menu items. But, the table row height also changes whenever the menu expands/collapses.
How can i keep the table row height constant and the dropdown gets displayed over the table. I tried setting higher z-index for dropdown container but it didn't work. As,
.menu-body{
background-color: #ea7600;
z-index:2;
}
Plunker code is here.
Table height must not fall below the second dark horizontal line.
You need to use absolute positioning, but that requires some minor html changes as well:
add span to th and td:
<th><span>lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng header</span></th>
<td><span>lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng content</span></td>
change css:
td,th{
position: relative;
border: solid black 2px;
padding: 5px;
text-align: center;
}
td span,th span{
text-overflow: ellipsis;
overflow : hidden;
white-space: nowrap;
display: block;
}
.menu-body{
position: absolute;
width: 100%;
}
Updates plunker: http://plnkr.co/edit/WYyrnO5lIVFFJBCNdfNc?p=preview
.parent-container-classname *{
overflow : visible;
}
.menu-body{
overflow : auto !important;
}
all parent containers should have overflow:visible and your drop down should have overflow:auto
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;
}
If I were to have a div with a specified width, how would I prevent a new line when the content exceeds the parent div's width?
Here is my HTML code:
<div style="width: 200"><p>Verrrrrrry loooooooong pppppppp ellllemmmmmmmmentttt</p></div>
Any help would be appreciated.
Thanks!
You could simply use:
div {
white-space: nowrap;
overflow: hidden; /* assuming you don't want the <div> to stretch to accommodate */
} /* the width of the text */
div {
width: 300px;
white-space: nowrap;
overflow: hidden;
border: 2px solid rgba(0,0,0,0.5);
}
<div>This element has some text longer, by far, than the width of the page in which it is contained; it would be lorem ipsum but, honestly, I'd rather spend a few moments typing randomly, but continuously, than go find myself some of that lorem-goodness...</div>
References:
white-space (MDN).
white-space (W3.org, CSS 2.1).
Use white-space: nowrap:
div{
overflow: hidden; /* Prevent text from overflowing div */
white-space: nowrap; /* Prevent text from using more than one line */
}
Try this CSS:
overflow:hidden;
white-space:nowrap;
Should do the trick