Question

这是我的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>

问题在于我希望将所有红色底线后面的文字替换为......或淡出。一些看起来不错的东西。有人可以建议我怎么做吗？我也提供了小提琴。 link

Answer 1

您可以将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;
}

Answer 2

你可以尝试这个（使用省略号）

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

Answer 3

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

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

.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

希望将所有红色底线后面的文字替换为......或淡出。

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

我将尝试演示如何执行fadeout（问题的第二部分）。您可以向::after添加li伪元素，并为其提供渐变背景。提供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>

但是，为了正确显示日期时间戳，你必须重新想象一下你的布局。

Answer 5

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>

希望能帮到你！

文本溢出淡入淡出 - CSS

5 个答案: