溢出时不出现点
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-space
和text-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/
【讨论】:
以上是关于溢出时不出现点的主要内容,如果未能解决你的问题,请参考以下文章