[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?
'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/