文本溢出淡出- CSS

以下是我的CSS和HTML代码。

.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>

问题是，我想要所有的文本后红色底线替换为…或者淡出。看起来不错的东西。有人能告诉我怎么做吗?我也提供小提琴。链接

您可以使用text-overflow与css和max-width来控制它。

http://fiddle.jshell.net/bqhmkfux/2/

你需要在css中添加这个类:

.sidebarExternalLink {
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}

text-overflow: ellipsis;与overflow: hidden的组合是如何得到...的三个点的。

另一种效果可以通过在显示文本的底部使用CSS伪元素添加渐变蒙版来实现。

我已经把一个例子放在一起使用一个可滚动的div与线性渐变到白色;

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>

希望这对你有帮助!

这可以通过使用overflow: hidden;和text-overflow: ellipsis;来实现。需要进行以下更改:

将overflow: hidden;添加到.meta，这告诉它切断任何超出其边界的内容
将text-overflow: ellipsis;添加到.meta，这将确保截断文本被省略号
将margin-right: -32px;添加到.meta，这将抵消.items li上设置的padding的数量，以确保文本在红线的末尾被截断

.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>

希望将红色底线之后的所有文本替换为…或淡出。

其他答案已经描述了如何显示省略号。

我将试着演示如何做fadeout (你问题的第二部分)。您可以向li添加::after伪元素，并为其提供渐变背景。将position: relative提供给li，将position:absolute提供给伪元素。

像这样:

.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));
}

.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>

但是，为了正确地显示日期时间戳，您将不得不重新想象一下您的布局。

你可以试试这个(使用省略号)

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;
}

演示

相关内容

最新更新

热门标签：