Откажитесь от фоновых программ и JS и используйте CSS для автоматического перехвата текста

Автор：Eve Cole Время обновления：2009-05-31 01:04:50

Использование CSS для автоматического перехвата текста не требует фоновых программ и JS. Преимущества его использования: совместимость с IE, Firefox, Opera; хорош для целостности контента; нет необходимости перехватывать длину; можно настроить в любое время на переднем плане.
Недостатки: Длина перехвата не может быть определена автоматически. Когда символы очень короткие, в Firefox будут генерироваться последующие эллипсы.
Кроме того, при настройке ширины перехвата обратите внимание на то, чтобы перехват текста был полным.

Запустить демо-версию
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>перехват текста CSS< /title> <style type="text/css"> body{font-size:13px;color:#8c966b;} div{clear:both;width:340px;border:1px Solid #333;margin:3px;padding: 3px;} div a{color:#8c966b;text-decoration:none;} div a:hover{text-decoration:underline;} div a{display:block;width:310px;white-space:nowrap;overflow:hidden ;float:left; -o-text-overflow: ellipsis; /* для Opera */ text-overflow:ellipsis; /* для IE */ } div:after{content:"...";padding-left:3px ;font-size:12px;}/* для Firefox */ </style> </head> <body> <div><a href="">Используйте css для автоматического перехвата текста без необходимости использования фоновых программ и JS Преимущество использования </a></div> <div><a href=""> заключается в том, что это полезно для целостности контента и SEO, без необходимости фоновой обработки программы и длины, подлежащей перехвату. можно отрегулировать в любое время на переднем плане. </a></div> <div><a href="">Недостатки: длина перехвата не может быть определена автоматически. Если символы очень короткие, последующие символы многоточия также будут генерироваться в Firefox. </a></div> <div><a href="">Кроме того, при настройке ширины перехвата будьте внимательны, чтобы перехват текста был максимально полным</a></div> </body> </html>