Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > CSS DIV enables text to be displayed in one line, and excessive text is replaced with dots_html/css_WEB-ITnose

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

WBOY
Release： 2016-06-24 12:27:16
Original
1486 people have browsed it

有些时候我们在使用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.


Related labels：
CSS+DIV实现文字一行内显示，并且过多的文字以点来代替
source：php.cn
Previous article：css to realize the color of each row of div_html/css_WEB-ITnose Next article：css div height adaptive_html/css_WEB-ITnose
Statement of this Website
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
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2240
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2380
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1990
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1877
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1947
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template