Home >Web Front-end >CSS Tutorial >Use css to solve the problem of table text overflow and control the number of words displayed in td

Use css to solve the problem of table text overflow and control the number of words displayed in td

高洛峰
高洛峰Original
2017-06-06 09:24:552801browse

Many novice friends will always encounter more or less problems in the process of development. I saw someone asking how to hide and display redundant text and use... to express that today, just To solve this problem for everyone, just upload the code. The code is as follows

table{      
width:100px;     
 table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */  } 
 
 td{    
   width:100%;      
 word-break:keep-all;/* 不换行 */   
    white-space:nowrap;/* 不换行 */     
     overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */    
       text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;
       需与overflow:hidden;一起使用*/  }

The above is the detailed content of Use css to solve the problem of table text overflow and control the number of words displayed in td. For more information, please follow other related articles on the PHP Chinese website!

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