| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <style> |
| .testDiv { |
| width: 308px; |
| border: 5px solid green; |
| padding: 0px 5px 0px 20px; |
| white-space: nowrap; |
| overflow: hidden; |
| margin: 0 0 20px 0; |
| text-overflow: ellipsis; |
| } |
| |
| .rtl { |
| direction: rtl; |
| unicode-bidi: bidi-override; |
| } |
| |
| .leftAlign { text-align: left; } |
| .rightAlign { text-align: right; } |
| .centerAlign { text-align: center; } |
| .justifyAlign { text-align: justify; } |
| </style> |
| </head> |
| <body> |
| <div class="testDiv leftAlign">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div> |
| <div class="testDiv leftAlign rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div> |
| |
| <div class="testDiv rightAlign">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div> |
| <div class="testDiv rightAlign rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div> |
| |
| <div class="testDiv centerAlign">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div> |
| <div class="testDiv centerAlign rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div> |
| |
| <div class="testDiv justifyAlign">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div> |
| <div class="testDiv justifyAlign rtl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae eros non libero faucibus sagittis sed ut eros.</div> |
| </body> |
| </html> |
