css单行显示多余省略注意事项

CSS怎么显示?

css换行显示,网上一搜一大堆,最简单的不外乎如下代码:

.singleLine {
  white-space: nowrap;/*禁止文字内容折行*/
  overflow: hidden !important; /*超出部分溢出隐藏*/
  text-overflow: ellipsis;/*文字以省略号的方式隐藏*/
}

但是注意了!!! 这里有个前提就是这个只支持该标签是没有横向布局的父节点,如果你要在横向布局的某个div或者view显示单行文本,则只这样设置是不行的,因为外层父节点未设置超出部分溢出隐藏,造成宽度不对。比如我要实现以下效果:实现效果
前后都有单行显示,多余省略的需求,则还需要设置外层的父节点也为单行显示,否则会出现以下情况:
外层未设置省略号
这个情况时未设置父节点超出部分溢出隐藏overflow,样式代码:


.luck-container {
  align-items: center;
  flex-direction: row;
  display: flex;
  overflow: hidden !important; /*超出部分溢出隐藏*/
}

此外如果还是显示不正常,比如icon和文字换行了,那么可以考虑父节点单行显示:

.luck-container {
  align-items: center;
  flex-direction: row;
  display: flex;
  overflow: hidden !important; /*超出部分溢出隐藏*/
  flex-wrap: nowrap; /*当前容器不换行显示*/
}

后记

这个问题困扰了我好几天,总是设置不正确,所以记录一下,所以有时候我们需要跳出原来的思维范畴,看看是不是其他哪里没设置好,比如外层影响或者有像是冲突(同名样式)。

你可能感兴趣的:(前端,小程序,css)