I have a title with a format of {ID} | {title}, where the titles tend to be very long. I would also like this title to stay to one line, so I have a solution like so :
.wrapper {
width: 100%;
display: block;
}
.outer {
overflow: hidden;
}
.inner {
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
display: -webkit-box;
}
<div class="wrapper">
<div class="outer">
<span class="inner">12334569 | SDFFDSFS_FSFDSSDF_SFSDF_WEFWEFEFWFWFFWEFEWWFWE_SFSDFSFSDFSFSFSFSD_FSDDFSFFSDSFS_FSDFDSFSFS_FSFFSDFSDFSDFSFSFD_FSDFSDF</span>
</div>
</div>
The issue with this is it shortens the entire title because it's a long string. I'm wondering if it's possible to keep the title as a single line and have it truncate only the part of the title string that is extending beyond the first line, for example:
12334569 | SDFFDSFS_FSFDSSDF_SFSDF_WEFWEFEFWFWFFWEFEWWFWE_SFSDFSFSDFSFSFSFSD_FS...
I've not been able to find a way to cleanly do this with CSS.
To prevent text wrapping you can add white-space: nowrap; and to inform user that there is more characters you can add text-overflow: ellipsis;
.wrapper {
width: 100%;
display: block;
}
.outer {
overflow: hidden;
}
.inner {
text-overflow: ellipsis;
white-space: nowrap;
background-color: red;
overflow: hidden;
max-width: 40vw;
}
<div class="wrapper">
<div class="outer">
<div class="inner">
12334569 | SDFFDSFS_FSFDSSDF_SFSDF_WEFWEFEFWFWFFWEFEWWFWE_SFSDFSFSDFSFSFSFSD_FSDDFSFFSDSFS_FSDFDSFSFS_FSFFSDFSDFSDFSFSFD_FSDFSDF
</div>
</div>
</div>
Related
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>
.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 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'm trying to implement white-space: nowrap; and text-overflow: ellipsis; on a flex:1; div without setting the max-width. I want it to adjust to the width flex:1 gives.
Here is a fiddle that explains what I want and what actually happens:
https://jsfiddle.net/dani3l/6y04bvu1/13/
I'd like to keep the solution css only if possible.
Thanks in advance!
You can try this in your flex:1 class:
.flex-1, .flex-1 > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Here is a snippet to show this.
.flex-container {
display: flex;
align-items: center;
height: 50px;
width: 120px;
padding: 0 10px;
background-color: black;
}
.flex-1 {
flex: 1;
color: white;
}
.flex-1, .flex-1 > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="flex-container">
<div class="flex-1">
This is very long text.
</div>
</div>
<br>
<br>
<div class="flex-container">
<div class="flex-1">
<div>
Child divs work too
</div>
<br />
<span>
Child spans work too
</span>
</div>
</div>
I found Larry Gordon's Codepen that helped me with this.
to apply text-overflow: ellipsis, you have to give width or max-width otherwise it don't have any idea where it needs to stop.
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;
}