<html> <head> <style type="text/css"> div.test { white-space:nowrap; width:12em; overflow:hidden; border:1px solid #000000; } </style> </head> <body> <p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p> <p>This div uses "text-overflow:ellipsis":</p> <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div> <p>This div uses "text-overflow:clip":</p> <div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div> <p><strong>:</strong> The text-overflow property is not supported in Firefox.</p> </body> </html>
Your Result:
上のテキストを編集し、クリックして結果を見てください。
W3Schools.com
- Try it yourself