Question

我在名为My Anime List的一方很活跃。这是跟踪你的动漫。
在这个网站上你可以上传一个自定义的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;
}

Answer 1

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

overflow:hidden;
white-space: nowrap;

请参阅Fiddle Here

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

Answer 2

你可能需要文本溢出并将span作为一个框转换：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

在td CSS中裁剪文本

3 个答案: