<style type="text/css"> .text { width:100px; overflow:hidden;} .text-cut{ display:block; text-overflow: ellipsis; width:100%; /*ie6 写在一层的时候要用到*/ white-space: nowrap; } </style> </head> <body> <h2 class="text"><span class="text-cut">我在哪里我的爱，为你不怕风吹日晒</span></h2> <h2 class="text"><span class="text-cut">我在哪里我的爱，为你不怕风吹日晒</span></h2> <h2 class="text"><span class="text-cut">我在哪里我的爱，为你不怕风吹日晒</span></h2> <h2 class="text"><span class="text-cut">我在哪里我的爱，为你不怕风吹日晒</span></h2> <h2 class="text"><span class="text-cut">我在哪里我的爱，为你不怕风吹日晒</span></h2> <h2 class="text"><span class="text-cut">我在哪里我的爱，为你不怕风吹日晒</span></h2> <h2 class="text"><span class="text-cut">我在哪里我的爱，为你不怕风吹日晒</span></h2> <h2 class="text"><span class="text-cut">我在哪里我的爱，为你不怕风吹日晒</span></h2> </body>
注意：外层的overflow是必须的，width100%是为了兼容ie6，但在这个例子是中是不需要的，注意和下面的比较