I have a few spans in a fixed width container.
One of the spans is longer than the others and changes in size at different times. I'm trying to limit this span to a maximum width so that the 3 spans fit on one line.
What I have so far works, but the problem is the span that is limited in length is slightly offset and the spans don't line up perfectly. What should I do to make all 3 spans fit on one line and align with each other so they look normal?
JSfiddle: https://jsfiddle.net/579cwmbv/
Code:
.container {
width: 350px;
display: inline-block;
}
.spanContainer {
display: inline-block;
}
.long {
overflow: hidden;
text-overflow: ellipsis;
max-width: 156px;
display: inline-block;
white-space: nowrap;
}
.short {
display: inline-block;
}
<div class='container'>
<div class='spanContainer'>
<span class='short'>Results near </span>
<span class='long'>"Seattle, WA, 98005, United States"</span>
<span class='short'>Change</span>
</div>
</div>
Try using flex
.spanContainer {
display: flex;
justify-content: space-evenly;
align-items: center;
}
If you format the spans in the same way as each other they line up:
.container {
width: 350px;
display: inline-block;
}
.spanContainer {
display: inline-block;
}
.long,
.short {
overflow: hidden;
text-overflow: ellipsis;
max-width: 156px;
display: inline-block;
white-space: nowrap;
}
<div class='container'>
<div class='spanContainer'>
<span class='short'>Results near </span>
<span class='long'>"Seattle, WA, 98005, United States"</span>
<span class='short'>Change</span>
</div>
</div>
Related
.wrapper {
background: tomato;
width: 100px;
display: flex;
}
.left {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.right {
}
<div class=wrapper>
<div class="left">
title title title title
</div>
<div class="right">
123
</div>
</div>
I have a DIV (wrapper) with 2 DIVs inside: left and right.
wrapper's width is known. I want to truncate text in left DIV if it doesn't fit. Text in right should be always visible. I tried several techniques here, but the only one is working is based on flex box. Unfortunately it doesn't work on IE10. I used -ms- prefixes, without success.
Is there any way to make it work on IE10?
I can't test this on IE10 myself, though since its -ms-flex defaults to 0 0 auto, you will need to add -ms-flex: 0 1 auto to the left, so it is allowed to shrink.
And as the default on IE11 and the rest of the browsers is 0 1 auto, they work as is.
Fiddle demo
Stack snippet
.wrapper {
background: tomato;
width: 100px;
display: -ms-flexbox; /* IE10 */
display: flex;
}
.left {
-ms-flex: 0 1 auto; /* IE10 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.right {
}
<div class=wrapper>
<div class="left">
title title title title
</div>
<div class="right">
123
</div>
</div>
Here is an idea without the use of flexbox but using display:table:
.wrapper {
background: tomato;
width: 100px;
display: table;
}
.left {
display: table-cell;
position: relative;
width: 100%;
}
.left span {
position: absolute;
top:0;
left:0;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.right {
display: table-cell;
}
<div class=wrapper>
<div class="left">
<span>
title title title title title title
</span>
</div>
<div class="right">
123
</div>
</div>
I have 3 tags inside of a div, and I'd like to force a particular element of those three to shrink when the parent div does and the other 2 to remain visible and not shrink (specifically, I'd like to make the number overflow with an ellipsis and allow the icon and the currency label to always be visible. Is there any elegant way to do this? Thanks!
See jsfiddle: https://jsfiddle.net/ugbpbj1v/
html:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="outer-box">
<span class="inner-box">6,039,460.00</span>
<div class="currency-label">USD</div>
<i class="fa fa-caret-square-o-up icon"></i>
</div>
css:
.outer-box {
max-width: 150px;
max-height: 14px;
overflow: hidden;
}
.inner-box {
display: inline;
text-overflow: ellipsis;
}
.currency-label {
display: inline;
}
.icon {
display: inline;
}
Change the max-width of the div to simulate the kind of resizing I'm refering to
CSS Flexbox to the rescue! Note that overflow: hidden should be applied to the element with text-overflow for it to work.
JSFiddle
.outer-box {
display: flex;
max-width: 100px;
max-height: 14px;
}
.outer-box > * {
flex: 0 auto;
}
.inner-box {
display: inline;
overflow: hidden;
text-overflow: ellipsis;
}
.currency-label {
display: inline;
}
.icon {
display: inline;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="outer-box">
<span class="inner-box">6,039,460.00</span>
<div class="currency-label">USD</div>
<i class="fa fa-caret-square-o-up icon"></i>
</div>
I have a two-column layout created with flexboxes.
In the right column, I have two rows, the first containing a header and the second containing the page content.
Within the header I have three columns, a button, some text, and a button.
I want the buttons to sit on the left and right of the column with the text taking up any additional room.
Finally, I want the text to have white-space:nowrap and text-overflow:ellipsis properties to truncate long titles.
My problem is this: I cannot get the text wrapping to work correctly in a flexbox that is nested in another flexbox, as shown in this fiddle:
http://jsfiddle.net/maxmumford/rb4sk3mz/3/
.container {
display: flex;
height: 100vh;
}
.left {
width: 200px;
background-color: yellow;
}
.right {
flex: 1;
background-color: blue;
color: white;
}
.header {
background: red;
color: white;
display: flex;
flex-direction: row;
}
.header .content {
white-space: nowrap;
flex: 0 1 auto;
text-overflow: ellipsis;
overflow: hidden;
min-width: 0;
}
.header .buttons {
background: green;
flex: 1 0 auto;
}
.header .content:hover {
white-space: normal;
}
<div class="container">
<div class="left">
content left
</div>
<div class="right">
<div class="header">
<div class="buttons">buttons</div>
<div class="content">
This content is really long and should wrap with ellipses, but for some reason it doesn't work when it's nested in a container with display: flex
</div>
<div class="buttons">buttons</div>
</div>
content right
</div>
</div>
However, the exact same code works when the header is not nested within a flex box:
http://jsfiddle.net/maxmumford/p7115f2v/1/
.header {
background: red;
color: white;
display: flex;
flex-direction: row;
}
.header .content {
white-space: nowrap;
flex: 0 1 auto;
text-overflow: ellipsis;
overflow: hidden;
min-width: 0;
}
.header .buttons {
background: green;
flex: 1 0 auto;
}
<div class="header">
<div class="buttons">buttons</div>
<div class="content">
This content is really long and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long
and is wrapped correctly... This content is really long and is wrapped correctly... This content is really long and is wrapped correctly...
</div>
<div class="buttons">buttons</div>
</div>
How can I achieve what I want in the first fiddle?
Thanks
There are two issues in your code preventing the ellipsis from working:
div.right contains div.header, which in turn contains the button and text.
div.right is a flex item in the main container (.container).
By default, a flex item cannot be smaller than the size of its content. The initial setting on flex items is min-width: auto.
This means that the length of your text, which is not wrapping, will set a minimum size for parent flex items. One way to enable flex items to shrink past their content is to set a flex item to min-width: 0.
You've done this already for the .content flex item, but it needs to be set on the .right item, as well.
You've got the .content element set to flex: 0 1 auto.
This tells the flex item to use the size of the content (flex-basis: auto). The text sets the size.
Instead, set the width to 0 and let the flex container distribute space, as necessary. You can do this with flex: 1 1 0, which is the same as flex: 1.
.container {
display: flex;
height: 100vh;
}
.left {
width: 200px;
background-color: yellow;
}
.right {
flex: 1;
background-color: blue;
color: white;
min-width: 0; /* NEW */
}
.header {
background: red;
color: white;
display: flex;
flex-direction: row;
}
.header .content {
white-space: nowrap;
flex: 1; /* ADJUSTMENT */
text-overflow: ellipsis;
overflow: hidden;
min-width: 0;
}
.header .buttons {
background: green;
flex: 1 0 auto;
}
.header .content:hover {
white-space: normal;
}
<div class="container">
<div class="left">
content left
</div>
<div class="right">
<div class="header">
<div class="buttons">buttons</div>
<div class="content">
This content is really long and should wrap with ellipses, but for some reason it doesn't work when it's nested in a container with display: flex
</div>
<div class="buttons">buttons</div>
</div>
content right
</div>
</div>
revised fiddle
The values of :
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
Will work only if the content of your element exceeds it's width.
You can set the width of .header .content:
.header .content {
width: 50%;
}
And it will work as you expect it to:
http://jsfiddle.net/t82pqks4/
I hope this solution helps someone as nothing else I found worked because of how my page was a giant nested combination of flexbox. so min-width 0 didn't work, nothing I tried worked except this.
Inside the flex column that has the copy you want to wrap, you need to do this.
.row {
display: flex;
}
.col1 {
position: relative;
flex: 1 1 70%;
overflow: hidden;
}
.nested {
width: 100%;
position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col2 {
flex: 1 1 30%;
padding-left: 1rem;
}
<div class="row">
<div class="col1">
<div class="nested">This is my really long copy that will push it out of the screen, and will not respect the elippse no matter what I do!!!</div>
</div>
<div class="col2">
Last Text
</div>
</div>
I have a inline-flex container with two inner blocks that must expand (without wrapping).
In the second block there is another inline-flex container with two inner inline-blocks that must never wrap their content.
What I need
Is to show the text-overflow: ellipsis when the width of the most-top container (div.width) is not enough for displaying all the inner blocks as white-space: nowrap.
The content of div.width must never overflow its container, in the case the content of the a link is too long.
Snippet
.splitbutton {
display: inline-flex;
border: 4px solid violet;
}
.default {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.default a {
/* white-space: nowrap; */
}
.button {
background-color: green;
padding: 5px;
}
.container1 {
white-space: nowrap;
}
.container1,
.container2 {
flex: 1 1 auto;
border: 3px double green;
}
.width {
border: 3px solid red;
/*width: 350px;*/
display: inline-flex;
flex-wrap: nowrap;
flex-direction: row;
}
<div class="width">
<div class="container1">
<span>Any kind of inline text</span>
</div>
<div class="container2">
<div class="splitbutton">
<div class="default">
Looooooooooooong text with many many spaces and letters
</div>
<span class="button">button</span>
</div>
</div>
</div>
Note
None of the present blocks can specify a specific fixed width!
The button must always stay visible (the ellipsis should eventually be applied to the a link element).
I have some pretty simple markup and I want long text to be truncated with "..."
.topRow div {
display: inline-block;
}
#name {
max-width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="topRow">
<div id="edit">
<div id="pre">Before -</div>
<div id="name">Some long text that should get truncated when it passes the max width</div>
<div id="post">- After</div>
</div>
</div>
Fiddle : http://jsfiddle.net/xyPrv/3/
The problem is that when I add overflow: hidden to the div, it makes the text jump up a few pixels and is out of alignment with the rest of the text around it.
What is causing this vertical movement? Without manually pushing the text back down (with position: relative; and top: 5px), how can I cleanly get the text to be aligned?
Try this:
.topRow div {
display: inline-block;
vertical-align:middle;
}
#name {
max-width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="topRow">
<div id="edit">
<div id="pre">Before -</div>
<div id="name">Some long text that should get truncated when it passes the max width</div>
<div id="post">- After</div>
</div>
</div>
http://jsfiddle.net/V79Hn/
If you change this:
.topRow div {
display: inline-block;
}
to this:
.topRow div {
float:left;
}
Then it's as you want it.
Or just use:
div {
width: 100%;
line-height: 1.2em;
height: 3.6em;
background-color: gainsboro;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}