Home >Web Front-end >HTML Tutorial >css_html/css_WEB-ITnose

css_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:17:301533browse

For example
There is a paragraph like this:
In the past year, under the strong leadership of the provincial party committee, provincial government and municipal party committee, the Municipal People's Government has deeply studied and practiced the Scientific Outlook on Development
is displayed like this on the web page:
In the past year, in the provincial party committee, provincial government and municipal party committee...
Written in CSS


Reply to discussion (solution)

Take a look at this example and you will know it



CSS text that exceeds the fixed number of characters is replaced with an ellipsis</ title> <br> </head> <br> <br> <style type="text/css"> <br> body{ <br> font-size:12px; <br> line-height:22px ; <br> } <br> li { <br> width:200px; <br> white-space:nowrap; <br> text-overflow:ellipsis; <br> -o-text-overflow:ellipsis; <br> overflow: hidden; <br> } <br> </style> <br> </head> <br> <body> <br> <ul> <br> <li><a href= "#">Tianxia Mastiff is a professional portal website for Tibetan Mastiff information in China. It has rich information on Tibetan Mastiff news, Tibetan Mastiff transactions, knowledge about raising mastiffs, pictures of Tibetan Mastiffs, videos of Tibetan Mastiffs and Tibetan Mastiff bases. The best and most comprehensive professional information platform for collecting, selling, and discussing mastiffs. </a></li> <br> <li><a href="#">Tianxia Mastiff is a professional portal website for Tibetan Mastiff information in China, with rich Tibetan Mastiff news, Tibetan Mastiff transactions, and knowledge about raising mastiffs , Tibetan Mastiff pictures, Tibetan Mastiff videos, Tibetan Mastiff bases and other information, it is the best and most comprehensive professional information platform for mastiff raisers and lovers to appreciate, buy, sell, and discuss mastiffs. </a></li> <br> <li><a href="#">Text overflow automatic omission testText overflow automatic omission test</a></li> <br> </p> <li> The best and most comprehensive professional information platform for those who raise and love mastiffs, appreciate, buy, sell, and discuss mastiffs. </a></li> <br> <li><a href="#">Text overflow automatic omission test</a></li> <br> </ul> <br> </body> <br> </html> </li></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement:</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article:<a class="dBlack" title="Ask a basic CSS question..._html/css_WEB-ITnose" href="https://m.php.cn/faq/280742.html">Ask a basic CSS question..._html/css_WEB-ITnose</a></span><span>Next article:<a class="dBlack" title="Ask a basic CSS question..._html/css_WEB-ITnose" href="https://m.php.cn/faq/280744.html">Ask a basic CSS question..._html/css_WEB-ITnose</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training,Help PHP learners grow quickly!</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>