<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=utf8">
<head>
<style>
.testDiv {
width: 308px;
border: 1px solid black;
white-space: nowrap;
overflow: hidden;
margin: 0 0 20px 0;
text-align: left;
text-overflow: ellipsis;
}
.rtl {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This test checks that text with text-overflow:ellipsis follows 'text-align: left' correctly.</p>
<p>The text in all boxes should be left aligned, sticking to the left side of the box</p>
<h3>Single line</h3>
<div class="testDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
<h3>Multi line</h3>
<div class="testDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
rem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
em ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
</div>
<h3>Containing replaced content</h3>
<div class="testDiv">Lorem ipsum dolor sit amet, <img src="resources/greenbox.png"> consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
<h3>Containing replaced content blocking the ellipsis</h3>
<div class="testDiv">Lorem ipsum dolor sit amet, consectetur ad<img src="resources/greenbox.png">ipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
<h3>Right-To-Left single line</h3>
<div class="testDiv rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
<h3>Right-To-Left Multi line</h3>
<div class="testDiv rtl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
rem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
em ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.<br>
</div>
<h3>Right-To-Left containing replaced content</h3>
<div class="testDiv rtl">Lorem ipsum dolor sit amet, <img src="resources/greenbox.png"> consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
<h3>Right-To-Left containing replaced content blocking the ellipsis</h3>
<div class="testDiv rtl">Lorem ipsum dolor sit amet, consectetur ad<img src="resources/greenbox.png">ipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div>
</body>
</html>
Codebase Browser
chromium