文字省略号不显示在flexbox项上

囊状体

我已经text-overflow: ellipsis在chrome和firefox上进行了测试,并且两者都缩短了文本,但是最后没有显示'...'怎么了

我已经使用其他解决方案,我发现这里如尝试min-widthmax-widthflex: 0 1 auto,等等。但他们都不是工作。省略号不显示。

这是我的代码:

ul {
  display: flex;
  height: 40px;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
}
ul li {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 4px;
  border-bottom: 1px solid #eee;
}
ul li:first-child {
  width: 55px;
  flex-shrink: 0;
}
ul li:first-child input {
  width: 100%;
}
ul li:last-child {
  width: 48px;
  flex-shrink: 0;
}
ul li:nth-child(2) {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0px;
}
ul li:nth-child(3) {
  width: 75px;
  flex-shrink: 0;
}

这是用来证明问题的小提琴:https : //jsfiddle.net/dpbejpou/1/

注意:我已经尝试使用其他解决方案,例如我说过的,例如在此链接上找到的最小宽度,最大宽度(您已经可以在我的代码中看到)但是代码stil不起作用。

迈克尔·本杰明(Michael Benjamin)

为了text-overflow: ellipsis工作,必须定义一个宽度。您有flex-basis: auto,这还不够。

而且,text-overflow: ellipsis仅适用于块级元素。

一个弹性项目被认为是封闭的,省略号将起作用。但是,您还将应用display: flex到flex项,这会破坏display属性的块级规则

尝试以下调整:

ul {
  display: flex;
  height: 40px;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
}
ul li {
  /* display: flex;           <-- remove */
  /* align-items: center;     <-- will no longer work */
  height: 100%;
  padding: 0 4px;
  border-bottom: 1px solid #eee;
}
ul li:first-child {
  width: 55px;
  flex-shrink: 0;
}
ul li:first-child input {
  width: 100%;
}
ul li:last-child {
  width: 48px;
  flex-shrink: 0;
}
ul li:nth-child(2) {
  flex: 0 1 100px;              /* adjusted; 100px for demo only */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0px;
}
ul li:nth-child(3) {
  width: 75px;
  flex-shrink: 0;
}
<ul>
  <li><input type="number" value="1"></li>
  <li>A very long text description goes here</li>
  <li>$99.90</li>
  <li>Del</li>
</ul>

修正的小提琴

要使文本垂直居中,可以像以前一样在非省略号元素上使用flex布局。要使省略号文本垂直居中,请尝试另一种方法

参考:

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

UITextView-在iOS 6上截断显示省略号的文本(使用自动布局)

来自分类Dev

文字溢出:IE中的省略号

来自分类Dev

Flexbox和文本溢出:省略号混合使用吗?

来自分类Dev

CSS文字省略号和100%宽度

来自分类Dev

Paginator省略号上的CakePHP链接

来自分类Dev

XSLT修剪文本长度并显示省略号

来自分类Dev

CSS文字溢出省略号+以%表示的宽度无效

来自分类Dev

带有省略号的CSS文字换行

来自分类Dev

处理省略号

来自分类Dev

省略项中的省略号省略

来自分类Dev

文字溢出的样式点:省略号

来自分类Dev

文字溢出省略号不起作用

来自分类Dev

如何用省略号截断长文本,但总是在省略号后显示图标

来自分类Dev

文字溢出:省略号在有限的显示行中不起作用

来自分类Dev

文字溢出:省略号;不截断溢出文本并给出省略号

来自分类Dev

结构省略号

来自分类Dev

省略号并在单行中显示多行文本

来自分类Dev

文本溢出:省略号显示不同的字符

来自分类Dev

如何使用文字溢出:省略号?

来自分类Dev

流体容器上方的流体按钮上的文字省略号

来自分类Dev

Flexbox和文本溢出:省略号混合使用吗?

来自分类Dev

Paginator省略号上的CakePHP链接

来自分类Dev

文本溢出:省略号和显示表格单元

来自分类Dev

以“ 100%”宽度div显示省略号

来自分类Dev

文字溢出的样式点:省略号

来自分类Dev

CSS 文本溢出省略号无法正确显示

来自分类Dev

在省略号上悬停时显示跨度标题

来自分类Dev

在右侧显示省略号并将文本向右对齐

来自分类Dev

UIButton 标题太长的省略号未显示

Related 相关文章

热门标签

归档