ZhengXingchi / ZhengXingchi.github.io

Apache License 2.0

0 stars 0 forks source link

文字超出显示三点省略号的方案ellipsis(单行，多行) #77

Closed ZhengXingchi closed 4 years ago

ZhengXingchi commented 4 years ago

关于单行

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ZhengXingchi commented 4 years ago

多行就群龙混杂了

-webkit-line-clamp 实现

div {
  display: -webkit-box;
  overflow: hidden;  
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

float 特性实现多行文本截断

缺点，因为我们是模拟省略号，所以显示位置有时候没办法刚刚好，所以可以考虑：

加一个渐变效果，贴合文字，就像上述 demo 效果一样。添加 word-break:break-all; 使一个单词能够在换行时进行拆分，这样文字和省略号贴合效果更佳。

ZhengXingchi commented 4 years ago

参考文献

纯 CSS 实现多行文字截断

ZhengXingchi commented 4 years ago

因为UI设计师不希望文字截断的时候截断一半或者采用渐变来模糊这种效果的话，只能去寻找js有没有什么方法

ZhengXingchi commented 4 years ago

参考文献

多行文本溢出显示省略号(…)全攻略

josephschmitt/Clamp.js

ZhengXingchi commented 4 years ago

但是这个插件是js写的，笔者想找一款在react中能良好使用的插件。然后搜到了react-string-clamp,引入后发现无法使用，具体原因未知。

接着找到了react-multi-clamp使用效果不错，这是根据multi-clamp进行改写的

同时还搜索到其它一些，留待以后备用 react-clamp-lines

react-string-truncate

react-clamp

ZhengXingchi commented 4 years ago

关于react-multi-clamp的bug

详见the react-multi-clamp@2.0.1 donot work when ellipsis is a reactelement 解决方案为

   function doNotNeedToClamp(isForcePrevent) {

        if (!isForcePrevent) self.option.onClampStart.call(self, {
          needClamp: false
        });
        self.option.onClampEnd.call(self, {
          didClamp: false
        });

        self.element.appendChild(self.ellipsis );
        self.element.removeChild(self.ellipsis )
      }
    },

或者将self.element.style的display设置为none

jackyr commented 4 years ago

@ZhengXingchi 你好，react-multi-clamp的bug在react-multi-clamp@2.0.2版本已经修复。那个解决方案有导致其他问题的风险，最好不要使用。

ZhengXingchi commented 4 years ago

@jackyr 谢谢作者的反馈，已更正。