文字超出自动截取网页示例-优快云博客

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文字超出自动截取为...</title> </head> <body> <style> *{ margin:0; padding:0; } body{font-family:Arial, Helvetica, sans-serif;} h2,em{ font-weight: normal; font-style: normal; } .test{ width:300px; margin:10px auto 0 auto; border:1px solid #eeeeee; padding:5px; color:#333333; } .test-title{ padding:0 10px; color: red; } /*文字超出自动截取为...*/ .text-cut{ display:block; width:100%; text-overflow: ellipsis; white-space: nowrap; overflow:hidden; } </style> <div class="test"> <h2 class="test-title"> <em class="text-cut">In most browsers, clicking on text or an image within the label will give focus to the area.</em> </h2> <p>What the label does is create an association between its contents and a control on the page. In most browsers, clicking on text or an image within the label will give focus to the area. In the case of a radio button, it will select it and in the case of a checkbox, it'll alternate between the two states (checked and unchecked).</p> </div> </body> </html>