文字超出部分自动换行、省略

假如想象 提交于 2019-12-17 16:18:11

table的td中超出部分如何设置自动换行?

对于td中内容为连贯的英文字符串或者数字串,默认总是不换行,列宽会撑开。

解决方法:

table{
  table-layout:fixed;
}

td{
    word-break:break-all;
    word-wrap:break-word;
}

 

超出部分省略号显示

解决方法:

1、单行省略

<p>这是一段特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别特别长的文字</p>
p{
    width: 250px;/*需要配合宽度来使用*/
    overflow: hidden;/*超出部分隐藏*/
    text-overflow:ellipsis;/* 超出部分显示省略号 */
    white-space: nowrap;/*规定段落中的文本不进行换行 */
}

 

2、多行省略

p{ 
  width: 250px; 
  overflow: hidden; 
  display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
  -webkit-box-orient: vertical;/*设置伸缩盒对象的子元素的排列方式*/ 
  -webkit-line-clamp: 3;/*限制在一个块元素显示的文本的行数。*/ 
}

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!