Hello Ravi,
Add width:200px to span. It should work. A very good demo is available here [
^]. May be following example can help you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<meta name="author" content="Prasad P. Khandekar"></meta>
<meta http-equiv="Expires" content="0"></meta>
<meta http-equiv="Pragma" content="no-cache"></meta>
<meta http-equiv="Cache-Control" content="no-cache"></meta>
<meta http-equiv="Pragma-directive" content="no-cache"></meta>
<meta http-equiv="cache-directive" content="no-cache"></meta>
<title>Test Page</title>
<style type="text/css">
body {
font:14px arial;
margin:0;
overflow: hidden;
word-wrap:break-word;
white-space: wrap;
text-overflow: ellipsis;
}
.greenBorder {
border: 1px solid #008000;
}
.quotestart {
width:16px;
vertical-align: top;
background: transparent top left no-repeat scroll url('images/lq.png');
}
.quoteend {
width: 16px;
vertical-align: bottom;
background: transparent top left no-repeat scroll url('images/rq.png');
}
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 100%; removed: relative; overflow: hidden;">
<div style=" #removed: absolute; #removed 50%;display: table-cell; vertical-align: middle;">
<span id="longText" style="max-width:200px;width:200px;word-wrap: break-word;word-break:break-all;display:inline-block;">
<img src="images/lq.png"/>
1111111111111111111111111111111111111111111122222222222333333333333333333344444444444
<img src="images/rq.png"/>
</span>
</div>
</div>
</body>
</html>
rq.png & lq.png are 16x16 images created using Terbuchet MS font & Alt+0147, Alt+0148 sequences.
Regards,