CSS DIV enables text to be displayed in one line, and excessive text is replaced with dots_html/css_WEB-ITnose

有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候，为了页面的美观，这里需要将文字在div中一行显示，并且将过多的文字进行隐藏，以点号进行代替。当鼠标放上面的时候会以title的形式显示所有的内容。

如下图所示为使用样式排版之前的效果：

如下图所示为使用样式排版之后的效果：

明显下面的效果图要比之前友好实用多了。

如下为源码：

   
   
   
   


   

       

           

                测试测试测试测试测试测试测试
           

           

                测试测试测试测试测试测试测试
           

           

                测试测试测试测试测试测试测试
           

           

                测试测试测试测试测试测试测试
           

                                                                                                                                  
 ;Test test test test test test test
                                                                                           🎜>                                                                                                   < /center>



Partial explanation of the above source code

white-space:nowrap in css mainly controls whether text can be It is displayed in the same div without line breaks. Overflow: hidden and text-overflow: ellipsis hide excessive text and replace the excess text with dots. Here, all text can be displayed when the mouse is placed on the div, which is mainly achieved through the title attribute of the div.

Statement：

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