文字的动态最大宽度

因此，假设我有这个标记;文字的动态最大宽度

<div> 
    <span>Text one</span> 
    <span class="sticky">ABC</span> 
</div> 
<div> 
    <span>Some other text</span> 
    <span class="sticky">DEF</span> 
</div> 
<div> 
    <span>Lorem dolor sit amet lorem ipsum dolor</span> 
    <span class="sticky">GHI</span> 
</div>

哪一个会伴随着CSS产生如下图所示的结果。

但是，当第一个span中的文本长于div的分配宽度时，会出现问题。定期发生的只是正常的文本包装;第二个span被碰撞到第二排的末尾。

但是，我想这个元素只是一个单一的行。现在，当然要做到这一点，你做到了;

white-space: nowrap; 
overflow: hidden;

但随后发生的事情是第二span消失被遗忘，因为它是第一span赶走由文本的长度。

我想要达到的是下面第三个例子中的图片。当第一个span的内容太长而无法显示时，text-overflow: ellipsis;会以点点形式切割该字符串，并且第二个span将被推到最右边（div允许的padding）。

本质上，第一span的伪max-width将等于所述div的宽度，但不包括其padding和扣除的span.sticky宽度，无论其可以是（作为它的内容可能有所不同，因此，宽度没有设置）。

我不知道max-width实际上是在接近这样的东西时走的路，但这是我可以用来最好地描述我想要的行为。

是否有一个非JS的方法来实现这个？

Example

来源

2013-01-07 Emphram Stavanger

这绝对可以，而且应该在CSS来实现。在第一个跨度上应用固定宽度和固定高度。高度使它不会伸展到多条线。之后，.sticky跨度可以定位。这甚至可以通过使用百分比或ems使流体变得流畅。有些事情需要考虑，我不知道'ABC'，'DEF'的背景，但是如果它们是纯粹的视觉而不是结构性元素，它们可能更好地应用在伪类前：或之后。

这里有一个简单的例子：

div { 
    width: 200px; /* some amount that you set */ 
} 
span:not(.sticky) { /* can use another selector, just wanted it to be exceptionally clear what i was referring to here */ 
    display: inline-block; /* so height and width actually take affect */ 
    max-width: 80%; 
    height: 1em; /* so overflow hidden works and keeps text on one row */ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; /* important to show ellipsis, or words will just be broken off */ 
} 
span.sticky { 
    display: inline-block; 
    width: 20%; 
}

如果你想看到一个现场直播这个工作，我做了这样的设计上moolta.com。点击“制造挑战”并打开模式选择朋友。下拉列表中的李是我正在谈论的内容。他们不得不成为省略号，并有一个按钮跟着他们，不破坏线

来源

2013-01-08 22:24:52 DMTintner

我想使它完全动态的，它可以用一个小JS dohickey是计算的实际'MAX-width'第一个得到改善基于'div'的宽度和'sticky'的实际内容宽度'span'，因为CSS中缺少类似的功能。但这是一个很好的开始。 –

拨弄周围创造这个; http://jsfiddle.net/GEzXU/ - 关于这种方法有多聪明的意见受到欢迎。 –

有没有办法让这个工作使用外部div的动态宽度？ – crobicha

<html> 
    <head> 
    <style> 
     .left { 
     max-width: 200px; 
     display: inline-block; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
     } 

     .right { 
     float: right; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="left"> 
     <div class="right">FOO</div> 
     Lorem 
    </div> 
    <br /> 
    <div class="left"> 
     <div class="right">FOO</div> 
     Lorem ipsum 
    </div> 
    <br /> 
    <div class="left"> 
     <div class="right">FOO</div> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit 
    </div> 
    </body> 
</html>

来源

2014-03-04 00:38:24

文字的动态最大宽度

回答

相关问题