文本溢出可变大小

我一直在寻找实现以下设计的HTML/CSS。 http://i.imgur.com/LwKAZ.jpg 我有在列中的文本溢出问题。目前表格列的宽度是以百分比格式给出的，因此列宽将根据屏幕大小而变化。但是也有一个最小宽度。在第一个文本列中，您可以看到内容正在扩展，并且由于尺寸较大而生成了第二行。如何使用文本溢出来避免这个问题？或者其他解决方案？此外，当鼠标悬停发生时，您可以看到一组图标出现在同一行中。此时，图标下面的文本应该隐藏，并且应该缩短设计中显示的内容。你能否建议我解决这个问题？我试过text-overflow: ellipsis。但是当屏幕宽度发生变化时，我遇到了问题。由于可变列宽没有最小宽度，因此如何缩短此字段中的文本？另外在悬停的情况下??文本溢出可变大小

请让我知道，如果你想知道的一切。

来源

2012-09-15 99tharun

如果不希望文本在多行分割，加white-space:nowrap规则。然后，为单元格设置一个max-width。

对于图标，position他们在absolute右侧，z-index高于文本。您还必须将relative位置添加到包含的单元格中。为了让它们在文本上可见，我添加了一个背景颜色（和一些左边的填充）。

编辑：修正了Mozilla的

的Mozilla似乎忽略position:relative;的td元素。要修复它，你来包装另一个DIV中的TD的内容，并运用这种风格

.tables td { 
    font-weight: 400; 
    font-size: 13px; 
    border-bottom: 1px solid #E1E1E1; 
    line-height: 38px; 
    text-align: right; 
    white-space: nowrap; 
    max-width: 200px; /* just an example */ 
} 

.tables td > div { 
    overflow: hidden; 
    width:100%; 
    position: relative; 
} 

.linkFunctions { 
    display: none; 
    padding-top: 14px; 
    position: absolute; 
    right: 0; 
    z-index: 999; 
    background-color: #FFF9DC; 
    padding-left: 3px; 
    width: 100%; 
    max-width: 120px; /* just an example */ 
    text-overflow: ellipsis; 
    overflow: hidden; 
}

来源

2012-09-15 10:26:35 Giona

感谢GionaF！这很好用！ :) – 99tharun

如果我们需要添加三个不要（...），只要我们缩短文本？ – 99tharun

将此添加到。linkFunctions'width：100％; max-width：120px; text-overflow：ellipsis; 溢出：隐藏;' – Giona

这不正是你想要的（关于省略号），但非常接近。

对于<td>内<a>添加

td a{ 
    display:block; 
    overflow:hidden; 
    width:100%; 
    white-space:nowrap; 
}

（您可能需要一个类添加到他们更容易瞄准他们，而不是所有<a>内<td> S）。

和关于悬停。向右浮动div.linkFunctions，为其添加黄色背景，并且看起来像是相应地剪切文本。

来源

2012-09-15 10:25:18

所有这些都需要一个宽度来设置，不使表流体，因为他们的目的是是。使用此：http://jsfiddle.net/maruxa1j/

这可以自动设置<td>宽度为百分比和:after自动调整大小的溢出<span>

来源

2015-05-21 00:27:18

文本溢出可变大小

回答

相关问题