Some times we may not have enough space to place content to display for combo boxes, in such cases we can use text wrapper method. We can do this by implementing jQuery, CSS etc.. Now i am giving solution with CSS. Please find the code below.
<!--
<html>
<head>
<style>
.myselect {
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
}
.myselect option {
white-space: nowrap;
width: 100%
}
</style>
</head>
<body>
<select name="d" class="myselect">
<option value="sdf" class="test1"> line text How to wrap the big line text </option>
<option value="sdf2" class="test1"> line text How to wrap the big line text </option>
<option value="sdf3" class="test1"> line text How to wrap the big line text </option>
<option value="sdf4" class="test1"> line text How to wrap the big line text </option>
</select>
</body>
</html>
<!--
<html>
<head>
<style>
.myselect {
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
}
.myselect option {
white-space: nowrap;
width: 100%
}
</style>
</head>
<body>
<select name="d" class="myselect">
<option value="sdf" class="test1"> line text How to wrap the big line text </option>
<option value="sdf2" class="test1"> line text How to wrap the big line text </option>
<option value="sdf3" class="test1"> line text How to wrap the big line text </option>
<option value="sdf4" class="test1"> line text How to wrap the big line text </option>
</select>
</body>
</html>
-->
No comments:
Post a Comment