fast/css/text-overflow-input.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>