Text overflow fade - CSS - css

Question

Here is my CSS and HTML code.
.column {
float: left;
width: 252px;
padding-left: 1px;
padding-bottom: 34px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul,
ol {
list-style-type: none;
}
.items li {
border-bottom: 1px solid red;
padding: 7px 16px 4px;
white-space: nowrap;
}
.items li.item--highlighted {
background: #f0ce78;
}
.items li .item__title {
font-size: 14px;
font-weight: normal;
text-transform: none;
font-family: "Roboto", sans-serif;
}
.items li .item__meta__separator {
display: inline-block;
margin: 0 5px;
}
.items li .red {
color: #ed1b2e;
}
.items li .info-bubble.info-bubble-bottom.info-bubble-bottom-left {
left: 70px;
}
.meta {
color: #9D9D9D;
font-size: 11px;
}
<div id="salesInvoice4Columns" class="column column-4" style="width:px;">
<ol class="items">
<li id="saleInvoiceLink0">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">622790_150510_05101756067567567567565758DI</a> <span class="item__meta__separator">|</span>
27.08 09:16
</div>
</li>
<li id="saleInvoiceLink1">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">201523443434343434072QU</a> <span class="item__meta__separator">|</span>
26.08 15:48
</div>
</li>
</ol>
</div>
The problem is that I want all the text which is after red bottom line replaced with ... or fade out. Something that will look nice. Can somebody suggest me how to make this? I have provided fiddle also. link

Answer 1

You can use text-overflow with css and a max-width to control it.
http://fiddle.jshell.net/bqhmkfux/2/
You need to add this class in the css:
.sidebarExternalLink {
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}

Answer 2

text-overflow: ellipsis; in combination with overflow: hidden is how you get the three dots ....
The other effect could be achieved with adding a gradient mask using a CSS pseudo element at the bottom of where the text is being displayed.
I've put together an example using a scrollable div with a linear gradient to white for you;
body {
background: white;
}
.wrap {
position: relative;
}
.txt {
height: 200px;
overflow: auto;
}
.txt:after {
position: absolute;
display: block;
bottom: 0;
left: 0;
right: 0;
height: 75px;
background: linear-gradient(transparent, white);
content: '';
}
<div class="wrap">
<div class="txt">
<p>Elit irure consectetur officia laboris nulla sit laborum irure consectetur qui nisi id duis est. Cupidatat est cupidatat consequat quis ad non laboris duis ut laboris adipisicing incididunt. Laborum consectetur tempor ipsum ea quis sit laborum ullamco amet id consectetur id exercitation officia. Est dolor elit laborum nulla officia elit do nisi ex occaecat. Veniam mollit ut proident ut quis incididunt amet sunt ullamco velit. Nulla nostrud cillum ea sint sunt. Id Lorem duis nostrud irure quis et fugiat. Cupidatat duis dolore Lorem incididunt tempor ipsum. Nulla adipisicing nisi enim ea do deserunt officia ut labore excepteur aliqua.</p>
<p>Elit irure consectetur officia laboris nulla sit laborum irure consectetur qui nisi id duis est. Cupidatat est cupidatat consequat quis ad non laboris duis ut laboris adipisicing incididunt. Laborum consectetur tempor ipsum ea quis sit laborum ullamco amet id consectetur id exercitation officia. Est dolor elit laborum nulla officia elit do nisi ex occaecat. Veniam mollit ut proident ut quis incididunt amet sunt ullamco velit. Nulla nostrud cillum ea sint sunt. Id Lorem duis nostrud irure quis et fugiat. Cupidatat duis dolore Lorem incididunt tempor ipsum. Nulla adipisicing nisi enim ea do deserunt officia ut labore excepteur aliqua.</p>
<p>Elit irure consectetur officia laboris nulla sit laborum irure consectetur qui nisi id duis est. Cupidatat est cupidatat consequat quis ad non laboris duis ut laboris adipisicing incididunt. Laborum consectetur tempor ipsum ea quis sit laborum ullamco amet id consectetur id exercitation officia. Est dolor elit laborum nulla officia elit do nisi ex occaecat. Veniam mollit ut proident ut quis incididunt amet sunt ullamco velit. Nulla nostrud cillum ea sint sunt. Id Lorem duis nostrud irure quis et fugiat. Cupidatat duis dolore Lorem incididunt tempor ipsum. Nulla adipisicing nisi enim ea do deserunt officia ut labore excepteur aliqua.</p>
</div>
</div>
Hope that helps you out!

Answer 3

This can be achieved by using overflow: hidden; and text-overflow: ellipsis;. The following changes are required:
Add overflow: hidden; to .meta, this tells it to cut off any content that goes outside its bounderies
Add text-overflow: ellipsis; to .meta, this will ensure that the cut off text is replaced with ellipsis
Add margin-right: -32px; to .meta this will offset the amount of padding set on .items li to ensure that the text is cut off at the end of the red line
.column {
float: left;
width: 252px;
padding-left: 1px;
padding-bottom: 34px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul,
ol {
list-style-type: none;
}
.items li {
border-bottom: 1px solid red;
padding: 7px 16px 4px;
white-space: nowrap;
}
.items li.item--highlighted {
background: #f0ce78;
}
.items li .item__title {
font-size: 14px;
font-weight: normal;
text-transform: none;
font-family: "Roboto", sans-serif;
}
.items li .item__meta__separator {
display: inline-block;
margin: 0 5px;
}
.items li .red {
color: #ed1b2e;
}
.items li .info-bubble.info-bubble-bottom.info-bubble-bottom-left {
left: 70px;
}
.meta {
color: #9D9D9D;
font-size: 11px;
margin-right: -32px;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="salesInvoice4Columns" class="column column-4" style="width:px;">
<ol class="items">
<li id="saleInvoiceLink0">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">622790_150510_05101756067567567567565758DI</a> <span class="item__meta__separator">|</span>
27.08 09:16
</div>
</li>
<li id="saleInvoiceLink1">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">201523443434343434072QU</a> <span class="item__meta__separator">|</span>
26.08 15:48
</div>
</li>
</ol>
</div>

Answer 4

want all the text which is after red bottom line replaced with ... or
fade out.
Other answers already describe how to display an ellipsis.
I shall try to demonstrate how you can do a fadeout (the second part of your question). You can add an ::after pseudo-element to your li, and provide it a gradient background. Provide position: relative to the li and position:absolute to the pseudo-element.
Something like this:
.items li { position: relative; }
.items li::after {
content: '';
display: inline-block; position: absolute;
top: 0; left: 100%; height: 100%; width: 100%;
background: -webkit-linear-gradient(right, #fff, rgba(255,255,255,0.5));
}
Example:
.column {
float: left; width: 252px;
padding-left: 1px; padding-bottom: 34px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
ul, ol { list-style-type: none; }
.items li {
border-bottom: 1px solid red; padding: 7px 16px 4px;
white-space: nowrap;
position: relative;
}
.items li.item--highlighted { background: #f0ce78; }
.items li .item__title {
font-size: 14px; font-weight: normal; font-family: "Roboto", sans-serif;
text-transform: none;
}
.items li .item__meta__separator { display: inline-block; margin: 0 5px; }
.items li .red { color: #ed1b2e; }
.items li .info-bubble.info-bubble-bottom.info-bubble-bottom-left { left: 70px; }
.meta { color: #9D9D9D; font-size: 11px; }
.items li::after {
content: '';
display: inline-block; position: absolute;
top: 0; left: 100%; height: 100%; width: 100%;
background: -webkit-linear-gradient(right, #fff, rgba(255,255,255,0.5));
}
<div id="salesInvoice4Columns" class="column column-4" style="width:px;">
<ol class="items">
<li id="saleInvoiceLink0">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">622790_150510_05101756067567567567565758DI</a> <span class="item__meta__separator">|</span>
27.08 09:16
</div>
</li>
<li id="saleInvoiceLink1">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">201523443434343434072QU</a> <span class="item__meta__separator">|</span>
26.08 15:48
</div>
</li>
</ol>
</div>
But, in order to display the date-time stamp properly, you will have to re-imagine your layout a little bit.

Answer 5

You can try this (using ellipsis)
CSS
.items li {
border-bottom: 1px solid red;
padding: 7px 0px 4px 16px;
}
.meta {
color: #9D9D9D;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
DEMO HERE