一、理论：
1.text-overflow
a.clip 不显示省略标记
b.ellipsis 显示省略标记
二、实践：
1.
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .text-overflow-clip1{ width: 80px; padding: 10px; border: 1px solid #ccc; text-overflow: clip; } .text-overflow-clip2{ width: 80px; padding: 10px; border: 1px solid #ccc; text-overflow: clip; white-space: nowrap; overflow: hidden; } </style></head><body> <div class="text-overflow-clip1"> 我就是来看一下是不是这里有好吃的。如果没有我就再换个地方找。 </div> <div class="text-overflow-clip2"> 我又换了一个地方，果然找到好吃的了。开心。 </div></body></html>立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3.base.css" media="all" /> <style type="text/css"> .block{ white-space:nowrap; width:12em; overflow:hidden; border:1px solid #000000; width:60px; line-height: 20px; border:1px solid #fc9; } .block ol{ padding-left: 23px; width: 14em; background: url(images/2-11-test.jpg) no-repeat 2px 4px; } .block li{ clear: both; margin: 0; padding: 0; list-style: none outside none; width: 30px; overflow:hidden; white-space:nowrap; } .block li a{ float: left; _display:inline; max-width: 14em; white-space: nowrap; _white-space:normal; _height:20px; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; color:#333; _background:transparent; } .block li span{ _position:relative; float:left; _display:inline; margin-right: -99px; padding-left: 10px; font-size: 10px; color:#999; } </style></head><body><div class="block" style="text-overflow:ellipsis;" > <span > 零食有五份 </span> <ol> <li style="text-overflow:ellipsis;"> 这里是一碗汤 </li> <li style="text-overflow:clip;"> 米饭三碗在这边 </li> </ol></div></body></html>立即学习“前端免费学习笔记（深入）”；
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
589
收藏
