4

我有一个宽度为 200 像素的表格。

它有 2 列：

  1. 标题（简单的文本、链接、...）
  2. 徽标（图片）

问题是：当 Title + Logo 超过 200px 我只需要限制Title。

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

仅限制HTML 和 CSS

我尝试不同的想法：

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

我得到的唯一结果是：

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

4 回答 4

5

/编写 CSS 代码如下/

.appadd {

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

}

现场演示 - 转到此链接

于 2013-12-15T05:58:02.613 回答
2

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

请参阅此工作小提琴示例！

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

笔记：

  • 由于自动换行需要一些块级元素，因此您至少需要设置TDwith display:inline-block。
  • 由于word-wrap当她溢出包装器时会破坏单词，因此您需要为TD.

您可以在 MDN上查看浏览器兼容性表。

于 2012-06-08T18:33:33.700 回答
0

我相信这不适用于 HTML 和 CSS，如果您想在客户端执行此操作，您可以使用 javascript，获取标题单元格的宽度，然后相应地修剪文本，为此您可以使用Substring 函数，虽然你可能想使用像 jQuery 这样的 JavaScript 库

于 2012-06-08T18:34:18.460 回答
0

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>
        }
于 2018-12-22T22:19:23.753 回答