项目场景:
表格中如果列过多时,对于备注类数据列的展示方法,可以是只展示前边几个字然后跟一个更多按钮如下图:
点击“更多”按钮弹层展示备注详细信息,详细信息的展示需要左右对齐。
谷歌展示很完美哟!
问题描述:
可是到了火狐中,如下图:
原因分析:
(1)text-align:justify
MDN上的解释:
我的火狐信息:Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0,版本都这么高了,肯定是支持的才对呢。
那就不是text-align:justify的毛病。
w3cschool中提到:
值 justify 可以使文本的两端都对齐。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。不过在 CSS 中,还需要多做些考虑。
要由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。例如,有些浏览器可能只在单词之间增加额外的空间,而另外一些浏览器可能会平均分布字母间的额外空间(不过 CSS 规范特别指出,如果 letter-spacing 属性指定为一个长度值,“用户代理不能进一步增加或减少字符间的空间”)
(2)white-space: pre-wrap
样式中只有white-space: pre-wrap是特殊的,为了展示用户输入的换行符。
那是不是像第一条中说的那样,white-space: pre-wrap影响了火狐的text-align:justify。这只是我的猜测。
解决方案:
把white-space中可以展示换行符的值都试一下,pre-line居然是可以的。
具体css代码:
text-align: justify;
white-space: pre-line;
下边是MDN给出关于可以识别换行符的详细解释:
具体原因到底是什么,有知道的伙伴可以指点一下哟!!!!