Question

我有一张宽度为200px的桌子。

它有两列：

标题（简单文字，链接，......）
Logo（img）

问题：当Title +徽标超过200px时，我只需要限制标题。

------------------------
|Title      |Logo      |
------------------------
|Helloooo...|img       |
------------------------

限制仅限HTML和CSS

我尝试不同的想法：

overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap;
table-layout:fixed;
...

我得到的唯一结果是：

------------------------
|Title      |Logo      |
------------------------
|Helloooooooooooo|img       | -> more than 200px
------------------------

Answer 1

/ 将CSS代码编写为 /

.appadd {

white-space: nowrap;
overflow: hidden;
width: 180px;
height: 30px;
text-overflow: ellipsis;

}

Live Demo - Goto this Link

Answer 2

您可以使用 CSS word-wrap来分割那些非常大的字词：

请参阅此working Fiddle示例！

.title {
    width: 100px;            /* adjust the value to fit your needs */
    word-wrap: break-word;
    display: inline-block;
}

注意：

由于自动换行需要一些块级元素，至少需要使用TD设置display:inline-block。

因为word-wrap在她溢出的时候打破了这个词包装器，你需要给TD。
一个固定的宽度

您可以查看浏览器兼容性表here at MDN。

Answer 3

我相信这不适用于HTML和CSS，如果你想在客户端进行，你可以使用javascript，获取Title单元格的宽度，然后相应地修剪文本，为此你可以使用Substring function，你可能想要使用像jQuery这样的JavaScript库

Answer 4

CSS解决方案在某种程度上对我有用，但在浏览器之间却不一致。因此，我接受了Rafael的建议并使用了Substring。就我而言，Html.Raw没有风险。这是我的代码-可能不是很好，但是效果很好：

        @foreach (var item in Model)
        {
            var exploreText = item.ExploreText;
            var exploreTextShort = "";
            if (exploreText != null)
            {
                if (exploreText.ToString().Length > 15)
                {
                    exploreTextShort = exploreText.ToString().Substring(0, 15);
                }
                else { exploreTextShort = exploreText; }
            }
            <tr>
                <td>
                    @Html.Raw(exploreTextShort)
                </td>
            </tr>
        }

表格列的HTML文本显示限制

4 个答案: