Using ellipsis as text-overflow doesn't work, except if text is "float"ed

Question

[I've read the multitude of SO threads on this subject, to no avail... ]

I've written a Python script that creates an HTML file. The file contains a set of links, which when rendered by the browser, are arranged in a list vertically on the page. There's no explicit styling to create this arrangement.

When rendered, some of the links are quite long, so I want to use text-overflow: ellipsis; to cut them short. This isn't working. The CSS code is shown below (note that this is actually the Python string that gets written as text to the HTML file):

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

The border attribute is being applied - it was added as a test - so I know that the style is being read.

For reference, the link tag is as follows:

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

If I add float: left; then the ellipsis is applied, but the links are arranged in an undesirable way on the page (no longer in an aligned list). What am I doing wrong? Should I have some styling to explicitly arrange the links in a left-hand-aligned list, rather than just assuming it'll be rendered that way by default?

Answer 1

'a' is an inline element, You should apply display: block; so the max-width can be applied.

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

An example: http://jsfiddle.net/w6bd6/