Ellipsis Text Message Using CSS

To add ellipsis into the long text use the below code. Mostly this will be useful in mobile development to fit the text in a small space. Ellipsis will be helpful in place of shrinking the text. Using CSS for Ellipsis will make your code simple and reusable in many places throughout your application. HTML Structure:
<ul data-role="listview" data-theme="f" data-dividertheme="g" data-inset="true" class=" listellipse " >
               <li data-role="list-divider"><span id="txt_paybill_msg"></span></li>
               <li><span id=" label_identifier"></span><span id="value_to_label_identifier"></span></li>
               <li><span id=" label_identifier"></span><span id="value_to_label_identifier"></span></li>
               <li><span id=" label_identifier"></span><span id="value_to_label_identifier"></span></li>
               <li><span id=" label_identifier"></span><span id="value_to_label_identifier"></span></li>
</ul>

CSS:

.listellipse li:not(:first-child){

     display:block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

}

.listellipse li:not(:first-child) span:first-child{

     width:45%;

     display:inline-block;

     white-space: pre;           /* CSS 2.0 */

     white-space: pre-wrap;      /* CSS 2.1 */

     white-space: pre-line;      /* CSS 3.0 */

     white-space: -pre-wrap;     /* Opera 4-6 */

     white-space: -o-pre-wrap;   /* Opera 7 */

     white-space: -moz-pre-wrap; /* Mozilla */

     white-space: -hp-pre-wrap;  /* HP Printers */

     word-wrap: break-word;      /* IE */

}