Question

[我已经阅读了关于这个主题的众多SO主题，但无济于事......]

我编写了一个创建HTML文件的Python脚本。该文件包含一组链接，这些链接在由浏览器呈现时，在页面上垂直排列。没有明确的造型来创造这种安排。

渲染时，某些链接很长，所以我想用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

＆＃39;一个＆＃39;是一个内联元素，您应该应用display: block;，以便可以应用最大宽度。

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

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

使用省略号作为文本溢出不起作用，除非文本是“浮动”编辑

1 个答案: