在 td CSS 中裁剪文本

Question

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

我想裁剪动画名称，使所有内容都排成一排。

我该如何裁剪它？关于 table 布局我所知道的一切，我已经修复了它，但现在我不知道如何进行。

.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;
}

Answer 1

您可能需要文本溢出并将 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>

Answer 2

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

overflow:hidden;
white-space: nowrap;

见Fiddle Here

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

Answer 3

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

在 td CSS 中裁剪文本

Crop Text in a td CSS

html

css

html-table

crop