一个允许文本溢出的容器中的三个可伸缩跨度

我目前正在尝试获取一个可在CSS中工作的场景，其中并排放置三个文本并且不包装。一旦第一个文本太长，它必须被截断。有关更详细的解释，请参阅下面的图片。一个允许文本溢出的容器中的三个可伸缩跨度

我到目前为止已经试过什么：

位置文本连续使用显示器使用Flexbox的
位置文本连续使用浮动
位置文本一行：表细胞

只要第一个文本比它的容器长，事情就会中断。无论是容器（或文本的孩子）变得比它应该更大或其他两个文本将被剪切/隐藏。

有没有人有一个想法来实现灵活的布局，如下图所示？
在不知道文本宽度的情况下，情况1（任何替代方法）和情况2都是可能的。

enter image description here

来源

2012-02-01 fluidsonic

在其浏览器应这项工作的反应......？ – ramsesoriginal 2012-02-01 21:33:24

就在那些支持CSS3的。所有其他人都可以在文本被剪切或手动截断的位置进行回退。 – fluidsonic 2012-02-02 08:35:13

在这里你去：

<div class="parent"> 
    <span class="third"> 
     Short 
    </span> 
    <span class="first"> 
     Short 
    </span> 
    <span class="second"> 
     Short 
    </span> 
</div> 

<div class="parent"> 
    <span class="third"> 
     Short 
    </span> 
    <span class="first"> 
     LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong 
    </span> 
    <span class="second"> 
     Short 
    </span> 
</div> 

<div class="parent"> 
    <span class="third"> 
     LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong 
    </span> 
    <span class="first"> 
     LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong 
    </span> 
    <span class="second"> 
     LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong 
    </span> 
</div>

风格是：

.parent{ 
    margin:10px; 
    width: 400px; 
    background-color:grey; 
} 

.parent span { 
    overflow:hidden; 
} 

.first { 
    text-overflow: ellipsis; 
    background-color:green; 
    min-widh: 20%; 
    float:left; 
    max-width: 60%; 
    display: inline-block; 
} 

.second { 
    background-color:red; 
    width: 20%; 
    display: inline-block; 
} 

.third { 
    float:right; 
    background-color:yellow; 
    width: 20%; 
    display: inline-block; 
}

你可以看到它的外观在这里：http://jsfiddle.net/ramsesoriginal/utSgC/

我选择基于百分比的宽度为它允许你简单地设置父母和父母的宽度他休息适应。

第三个例子是多么那么，当第二和第三变得很长

来源

2012-02-03 07:48:58 ramsesoriginal

嗨，谢谢你的回应！您的示例仅适用于跨度2和3具有固定宽度的情况，但在我的情况中并非如此。也许我们可以用灵活的宽度工作？ – fluidsonic 2012-02-09 17:24:31

好的，但是如何确定两个和三个的宽度呢？因为如果一个人是灵活的，并且应该增长，那么两个人和三个人必须缩小......但是多少？他们有最小长度吗？或者一个最大长度？或两者？ – ramsesoriginal 2012-02-10 07:20:10

（我用更多的案例更新了jsfiddle，只是为了让我有所有的例子。） – ramsesoriginal 2012-02-10 07:23:21

一个允许文本溢出的容器中的三个可伸缩跨度

回答

相关问题