zoukankan      html  css  js  c++  java
  • 文字超出部分自动换行、省略

    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;/*限制在一个块元素显示的文本的行数。*/ 
    }
  • 相关阅读:
    复利计算器2.01
    复利计算器2.0
    0429团队3.0
    0428 团队项目合作2.0作业
    "数学口袋精灵"bug
    操作系统-实验2
    博客评论
    复利计算升级
    0408 结对合作
    0406复利计算5.0
  • 原文地址:https://www.cnblogs.com/JerryD/p/11505834.html
Copyright © 2011-2022 走看看