在 td CSS 中裁剪文本答案

【问题标题】：Crop Text in a td CSS在 td CSS 中裁剪文本
【发布时间】：2015-05-16 21:58:02
【问题描述】：

我活跃在名为“我的动漫列表”的一侧。用于跟踪您的动漫。
在这个网站上，您可以上传自定义 CSS 设计以供您的列表我已经实现了我想要的设计，但我想一点一点地改进它，所以我的第一个问题出现了。

我想裁剪动漫名称，以将所有内容放在一行中。

如何裁剪它？关于表格布局我只知道它的某事，我已经修复了它，但现在我不知道如何进行。

.table {
     table-layout: fixed; 
     width: 100%;
}

我尝试编辑 td1、td2，但我认为我需要更改 td 内部以达到我想要的效果，但我所做的一切都没有用。

My List, for examples see #51,#58 in Completed

感谢您的帮助，抱歉我的英语不好，如果您需要其他信息，我会尽力提供给您。

解决方案（为我工作）

td.td2 span, td.td1 span { 
    display:block;
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;
}
.td1, .td2 {
    background-color: #FFF;
    border-color: #F2F2F2;
    border-style: solid;
    border-width: 0 0 1px !important;
    max-width: 416px;
}

【问题讨论】：

标签： html css html-table crop

【解决方案1】：

你可能需要 text-overflow 和 turn span 作为一个盒子：

td.td2 span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

td.td2 span {
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
table {
  width:100%;
  }

<table>
    <tr>
        <td class="td2" style="border-left-width: 1px;" align="center" width="30">28</td>
        <td class="td2" style="border-left-width: 0">
            <div style="float: right;">	
              <small>
		       <a href="/panel.php?go=add&amp;selected_series_id=27899&amp;hidenav=true" class="List_LightBox">Add</a> - 
		       <a href="javascript:void(0);" id="xmenu27899" onclick="getExpand(27899,2);" title="View More Information">More</a>
		</small>

            </div> 
          <small  style="float: right;margin:0.25em;">Airing</small> 
          <a href="/anime/27899/Tokyo_Ghoul_√A" target="_blank" class="animetitle" title="Anime Information"><span>Tokyo Ghoul √A</span></a> 
        </td>
        <td class="td2" align="center" width="45">5</td>
        <td class="td2" align="center" width="50">TV</td>
        <td class="td2" align="center" width="70">8/12</td>
        <td class="td2" align="left" width="125">	<span id="tagLinks27899"><a href="/animelist/ErgoCanis&amp;tag=Studio Pierrot&amp;status=7">Studio Pierrot</a></span>
	<span id="tagRow27899" style="display: none;">Studio Pierrot</span>
        </td>
        <td class="td2" align="center" nowrap="" width="75"><span title=""> &nbsp; </span>
        </td>
    </tr>
</table>

【讨论】：

谢谢，但我还是有问题fs1.directupload.net/images/150314/5326iaqu.png我的实际代码：td.td2 span, td.td1 span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@StevenOrthey 所涉及的 HTML 怎么样在这里，除非使用 colspan 或重置显示，否则表格 cols 不会从一行中断到另一行
我标记了你提到的部分？抱歉，我在阅读其他网站的代码时仍然遇到问题。 fs2.directupload.net/images/150314/9uo77nfh.jpg 我只是不明白为什么只有一些行会破坏它而其他行不会。谢谢
@StevenOrthey 我明白了，它坏了，因为你没有一张桌子，但是很多人互相堆叠，这就是为什么列可能会坏，如果你重新调整每行之间的标签 () 它将一直表现为一列:)

怎么样？它不是我的网站，我还能更改它吗？其他类别也有问题：fs1.directupload.net/images/150314/2xkp5w6n.jpg 我还用整个 css 文件更新了主帖子对不起，许多愚蠢的问题。感谢您的帮助！

【解决方案2】：

没有看到更多代码，我只能冒险猜测您想要什么 - 您可以尝试为您的 <td> 设置高度和最大宽度并使用

overflow:hidden;
white-space: nowrap;

见Fiddle Here

编辑： GCyrillus 在解决方案中添加了text-overflow:ellipsis;，我什至没有想到——这是让文本看起来更整洁的好方法。更新Fiddle.

【讨论】：

【解决方案3】：

td.td2 span { 
   display:block; 
    white-space:nowrap; 
    overflow:hidden; 
}

【讨论】：

一小时前你注意到我的回答了吗？