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

浓密的

首先,关于这种情况有很多问题,我尝试解决该问题,但对我而言并不奏效。所以,让我解释一下...

这就是我所拥有的: 在此处输入图片说明

我有一个div标签,100% width用于显示文章的名称和日期。名称向左浮动,日期向右浮动。此外,文章已修正。因此,他们没有问题。

这是HTML。顺便说一句,ell是一个用于添加省略号的助手类。左,右是用于浮动的辅助类。最后,cf用于clearfix。

  <div class="article">
    <a href="{{post.url}}">
      <div class="article-meta cf">
        <div class="article-name left ell">{{post.title}}</div>
        <div class="article-date right">{{post.date | date: "%b %d, %Y"}}</div>
      </div>
    </a>
  </div>

到这里为止,一切都是完美的。这是CSS:

  .article{
    margin-bottom: 1rem;
    &:last-child{ margin-bottom: 0; }
  }

  .article-meta{

    width: 100%;
  }

  .article-name{
    display: table-cell;
    width: 85%;
  }

  .article-date{
    display: table-cell;
    width: 9rem;
    // width: 15%;
    margin-left: 2rem;
    background-color: pink;
  }

我不想在中使用百分比.article-date,因为当我最小化页面时,某些像素(年份部分)经过第二行。就像这张照片:

在此处输入图片说明

因此,日期的宽度必须是静态的,名称必须是可变的。当日期到达标题时,名称应带有省略号。

谢谢你。

浓密的

我找到了答案。如果有人遇到相同的问题,请完全在此链接中进行操作。

http://jsfiddle.net/blai/7u59asyp/

.myTable {
    display: table;
    width: 100%;
}

.myTable:before {
    display: table-column;
    width: 100%;
    content: '';
}

.flexibleCell {
    display: table-cell;
    max-width:1px;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
}

.staticCell {
    white-space: nowrap;
}


<div class="myTable">
    <div class="flexibleCell">A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.</div>
    <div class="staticCell">Less content</div>
</div>

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS文字省略号和100%宽度

来自分类Dev

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

来自分类Dev

使用div的表格不适用于宽度或文字省略号

来自分类Dev

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

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

处理省略号

来自分类Dev

省略项中的省略号省略

来自分类Dev

两个div并排与省略号-最小宽度问题

来自分类Dev

截断省略号,不带宽度

来自分类Dev

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

来自分类Dev

如果单行,则在div中居中,否则显示省略号

来自分类Dev

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

来自分类Dev

CSS div自动调整大小到内容,带有最大宽度和省略号文本

来自分类Dev

具有第二列动态宽度和省略号的固定宽度表

来自分类Dev

宽度100%元素中的文本溢出省略号实现

来自分类Dev

如何使div省略号里面有多个段落?

来自分类Dev

结构省略号

来自分类Dev

CSS文字溢出:省略号不取决于宽度

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

带省略号的浮动div的CSS-宽度未知

来自分类Dev

div容器中的表格布局和省略号

来自分类Dev

在div中用省略号垂直对齐文本

来自分类Dev

省略号以限制离子的文本高度和宽度

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

Related 相关文章

热门标签

归档