溢出时不出现点

Posted

技术标签:

【中文标题】溢出时不出现点【英文标题】:Dots not appearing when overflowing 【发布时间】:2018-12-14 23:56:57 【问题描述】:

我有一个表格,中间的单元格包含长文本。 我发现下面的 CSS 理论上应该可以防止文本溢出并在末尾添加一些点。它确实可以防止它溢出,但是没有点。你能帮我理解为什么吗?

我希望它是这样的:long tex...

.headlinesStyle 
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 18px;
  white-space: normal;
  color: transparent !important;


.headlinesStyle::selection 
  color: transparent !important;


.headlinesStyle:before 
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
<table>
  <tr>
    <td>short text</td>
    <td><span class='headlinesStyle'><a href="http...">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </a></span></td>
    <td>short</td>
  </tr>
</table>

【问题讨论】:

【参考方案1】:

请在您的代码中添加以下样式..

a 
  text-overflow: ellipsis;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
<table>
  <tr>
    <td>short text</td>
    <td><a href="http...">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </a></span>
    </td>
    <td>short</td>
  </tr>
</table>

此外,如果您有一个跨度来实现省略号,则不需要它。简单地将样式直接应用到锚标签

【讨论】:

【参考方案2】:

.headlinesStyle 
  position: relative;
  overflow: hidden;
  display: block;
  height: 18px;
text-overflow: ellipsis;
width: 15%;
white-space: nowrap;
color: #333 !important;


.headlinesStyle::selection 
  color: transparent !important;


.headlinesStyle:before 
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
<table>
  <tr>
    <td>short text</td>
    <td><span class='headlinesStyle'><a href="http...">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </a></span></td>
    <td>short</td>
  </tr>
</table>

.headlinesStyle 
  position: relative;
  overflow: hidden;
  display: block;
  width: 20%;
  height: 18px;
  white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;


.headlinesStyle::selection 
  color: transparent !important;


.headlinesStyle:before 
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
<table>
  <tr>
    <td>short text</td>
    <td><span class='headlinesStyle'><a href="http...">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT </a></span></td>
    <td>short</td>
  </tr>
</table>

【讨论】:

【参考方案3】:

您可以像这样使用white-spacetext-overflow 来实现这一点:

.dots 
    max-width: 300px;
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow: ellipsis;
    color: black; //if you want to color the dots



<table>
  <tr>
    <td>short text</td>
    <td class="dots"><a href="http...">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXTTEXTTEXTTEXTTEXTTEXT </a></td>
    <td>short</td>
  </tr>
</table>

这是一个有效的 jsfiddle:http://jsfiddle.net/o24b6w0u/2/

【讨论】:

以上是关于溢出时不出现点的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Nice Select 不使用溢出隐藏

内存泄漏和内存溢出

内存要求:N 点 FFT(出现错误)

动画消失时不起作用,但出现时起作用

inputAccessoryView 出现键盘时不调用

链接表时不出现系统 ODBC