javascript - 如果文本不适合同一行，则不显示所有

Question

我的网站上有一个左侧边栏，其中包含一个带有链接的列表。如果一个链接很长，它不会只放在一行上。例如：'这是一个很长很长的链接'。我能做些什么来尽可能多地显示此文本（例如，'这是一个很长'），但它只适合一行（一行有 200 像素宽度）？

Answer 1

将 CSS 设置为：

overflow:hidden;
white-space:nowrap;

Answer 2

有一个名为的 CSS3 属性text-overflow可以控制您所描述的内容。结合overflow: hidden;和white-space: nowrap;您可以自定义在行尾显示的内容。

这里有很好的文档，描述了该属性的灵活性。但是，假设您要做的就是在超出其宽度的行的末尾添加一个省略号 (...)，那么您所要做的就是：

.sidebar p { /*Or whatever selector matches*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Answer 3

应用overflow: hidden;在容器上，连同设定的宽度和高度。