66 lines
3.9 KiB
HTML
66 lines
3.9 KiB
HTML
<!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> |