使用省略号作为textoverflow不起作用，除非文本是“float”ed

Question

[我读过很多关于这个问题的文章，但都没有用。。。]你知道吗

我已经编写了一个Python脚本来创建一个HTML文件。该文件包含一组链接，当浏览器呈现这些链接时，这些链接在页面上垂直排列在一个列表中。没有明确的样式来创建这种安排。你知道吗

渲染时，有些链接很长，所以我想用text-overflow: ellipsis;来缩短它们。这不管用。CSS代码如下所示（请注意，这实际上是作为文本写入HTML文件的Python字符串）：

ELLIPSIS = """<style>
              a {
                  white-space   : nowrap; 
                  max-width     : 70%; 
                  overflow      : hidden;
                  text-overflow : ellipsis; 
                  border        : 1px solid #000000;
              }
              </style>"""

正在应用border属性-它是作为测试添加的-因此我知道正在读取样式。你知道吗

作为参考，链接标签如下：

<a href="/goto?line=%s&dir=%s&remote=%s" target="_blank">%s</a></br>'

如果我添加float: left;，那么省略号将被应用，但是链接在页面上以不希望的方式排列（不再在对齐的列表中）。 我做错什么了？我是否应该有一些样式来显式地将链接排列在一个左对齐的列表中，而不是仅仅假设它在默认情况下会以这种方式呈现？你知道吗

Answer 1

“a”是一个内联元素，您应该应用display: block;，这样就可以应用最大宽度。你知道吗

a {
  display: block;
  white-space: nowrap; 
  max-width: 70%; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border 1px solid #000000;
}

例如：http://jsfiddle.net/w6bd6/