<!DOCTYPE html>
<html>
<head>
<title>text-overflow on form controls</title>
<style>
.ellipsis {
text-overflow: ellipsis;
}
.clip {
text-overflow: clip;
}
.rtl {
direction: rtl;
}
</style>
</head>
<body>
<p>This test is a basic check for using text-overflow.</p>
<p>
Apply "text-overflow:clip" to inputs. The following input should be clipped:<br/>
<input type="text" class="clip" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="search" class="clip" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="text" class="clip" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="search" class="clip" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="password" class="clip" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /><br/>
<input type="text" class="clip rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="search" class="clip rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="text" class="clip rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="search" class="clip rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="password" class="clip rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
</p>
<p>
Apply "text-overflow:ellipsis" to inputs. The following input should show an ellipsis:<br/>
<input type="text" class="ellipsis" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="search" class="ellipsis" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="text" class="ellipsis" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="search" class="ellipsis" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="password" class="ellipsis" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" /><br/>
<input type="text" class="ellipsis rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="search" class="ellipsis rtl" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="text" class="ellipsis rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="search" class="ellipsis rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
<input type="password" class="ellipsis rtl" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
</p>
<p>
Dynamic style change text-overflow:<br/>
Clip to ellipsis (should show ellipsis):
<input type="text" class="text1" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: clip" />
<input type="text" class="text1" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: clip" />
<br/>
Ellipsis to clip (should not show ellipsis):
<input type="text" class="text2" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: ellipsis" />
<input type="text" class="text2" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" style="text-overflow: ellipsis" />
<br/>
<script>
function iterateOverElements(className, setValue) {
var nodeList = document.getElementsByClassName(className);
for (var i = 0; i < nodeList.length; ++i)
nodeList[i].style.textOverflow = setValue;
}
iterateOverElements("text1", "ellipsis");
iterateOverElements("text2", "clip");
</script>
</p>
</body>
</html>
Codebase Browser
chromium