• word-break属性和css换行显示


      这几天在做项目的时候,遇到了比较棘手的问题,便是在一个标签里边展示内容,如果说展示中文汉字,一点问题都没有,但是只要连续展示英文字母或者中文的标点符号(中间不带空格),那么所渲染的内容就不会换行,而是超出标签来显示,如下图:

      

      为了解决让所有的内容都不超出标签的宽度,超出后自动换行的问题,便找到了word-break这个属性。

        word-break的其中有两个值为break-word和break-all,下面将对这两个值做一比较:

          break-word:英文单词在一行中所剩下的空间无法放下,那么这个单词并不会换行显示,而是将这个单词从盒子最大宽度处截开(一个单词显示两行,前半截在第一行,后半截在第二行);

          break-all:英文单词在一行中所剩下的空间无法放下,那么这个单词就会换行显示,保证单词不会被截断(一个单词显示一行)

      所以解决这个问题的办法就是在这个盒子上添加一个属性word-break:break-word;就能搞定。

      单行或多行容纳不下内容显示...less样式

    /*单行溢出*/
    .one_txt_cut() {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    /*多行溢出 手机端使用*/
    .txt_cut(@num:2) {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: @num;
      -webkit-box-orient: vertical;
    }
    
  • 相关阅读:
    java对redis的基本操作
    关于Java异常和错误的几个问题
    「hadoop」fs.defaultFS 9000 端口在外面连不上
    「ubuntu」修改权限和owner命令
    「ubuntu」pkexec超级修改权限
    「ubuntu」vim 基本使用
    「ubuntu」修改主机名
    「hadoop」ssh
    「vmware」虚拟机与主机共享目录
    「spring」定时任务(纯注解方式)
  • 原文地址:https://www.cnblogs.com/xiaoyaoxingchen/p/8274608.html
走看看 - 开发者的网上家园