<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Text with text-overflow:ellipsis and text-align: right truncates the ellipsis character"
href="https://bugs.webkit.org/show_bug.cgi?id=147877">147877</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Text with text-overflow:ellipsis and text-align: right truncates the ellipsis character
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>525.x (Safari 3.2)
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh Intel
</td>
</tr>
<tr>
<th>OS</th>
<td>Mac OS X 10.8
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>jjohns98684@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>When using text-overflow:ellipsis in an element where the text is right-aligned, the ellipsis character is never shown. If the text-align property is removed or disabled, the ellipsis occurs. This occurs on OSX Safari 7/8 only. Windows version is not affected, and neither are Chrome/FF/IE 10/11
I created a jsfiddle at <a href="http://jsfiddle.net/krd3yxbh/12/">http://jsfiddle.net/krd3yxbh/12/</a> to demonstrate the issue, and the html/css is replicated below:
<div class = 'outer-container' id = 'cell-1'>
<div class = 'cell-container'>
<div class = 'account-cell'>
<span class = 'account-currency'> $</span>
(1234567.89) <!-- text is truncated at the 6 with no ellipsis character visible. Disable text-align in CSS and ellipsis will show. -->
</div>
</div>
</div>
<div class = 'outer-container' id = 'cell-2'>
<div class = 'cell-container'>
<div class = 'account-cell'>
<span class = 'account-currency'> $</span>
(1234567.89) <!-- ellipsis shows when text-align is removed -->
</div>
</div>
</div>
#cell-1
{
top: 40px;
text-align: right;
}
#cell-2
{
top: 55px
}
.outer-container
{
left: 100px;
position: absolute;
overflow: hidden;
width: 67px;
height: 14px;
background-color: #FFFFFF;
border: 1px solid black;
font-size: 11px;
}
.cell-container
{
padding: 0px 3px 1px;
width: 61px;
display: table-cell;
height: 14px;
vertical-align: middle;
font-family: Tahoma, sans-serif;
}
.account-cell
{
color: #FF0000;
position: relative;
width: 52px;
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;
padding-left: 9px;
float: right;
}
.account-currency
{
position:absolute;
left: 0px;
}</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>