Question

我有几行电子邮件地址和名称。我想展示尽可能多的内容。所以，如果我有一个简短的名字，显示更多的电子邮件地址，如果我有一个简短的电子邮件，显示更多的名称。如果名称和电子邮件都很长，我希望他们占用相同的空间。对于任何长的截断项目，我希望它们以省略号结尾。

反正我是否可以在不诉诸Javascript的情况下保留这些要求？我不想使用flexbox布局（没有足够的浏览器支持），但我会对它持开放态度。而且，一切都是一条线;没有包装。

------------- -------------------------------------
| This is a long name...| This is a long email... |
------------- -------------------------------------

|<------------------100% width ------------------>|


<div class='result'>
  <div class='textHolder'>
   <h3>Name</h3>
   <h4>Email</h4>
  </div>
</div>

Answer 1

@Newtang我已根据您的要求更新了JSFiddle。展开和收缩页面时，如果页面宽度太小，则会出现省略号。

这是链接http://jsfiddle.net/6gFN9/1/

.textHolder {
    width: 100%;
}
h3, h4 {
    float: left;
    max-width: 50%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

Answer 2

如果没有javascript，我认为唯一可行的解决方案是每个都提供50％的max-width，并在文本溢出时提供带有省略号（...）的text-overflow ...

唯一的问题是，例如，如果名称非常小，如果电子邮件非常大，它将只占整个宽度的50％。

我做了这个小提琴：http://jsfiddle.net/N36tY/

（我同意cimmanon，使用其他标签）

示例HTML：

<div class='result'>
    <div class='textHolder'>
         <h3>Name</h3>

         <h4>Email</h4>

        <div class="clear"></div>
         <h3>Name and more text, etc and even more to make it overflow</h3>

         <h4>Email</h4>

        <div class="clear"></div>
         <h3>Name and more text, etc and even more to make it overflow</h3>

         <h4>Email and a lot of text and more and even more to make it overflow</h4>

        <div class="clear"></div>
         <h3>Small name</h3>

         <h4>Email and a lot of text and more and even more to make it overflow</h4>

    </div>
</div>

CSS：

.textHolder {
    width: 100%;
}
h3 {
    background: blue;
    color: #FFF;
}
h4 {
    background: green;
    color: #FFF;
}
h3, h4 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: normal;
    display: block;
    float: left;
    min-width: 10px;
    max-width: 50%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.clear {
    clear: both;
}

CSS，两个可变宽度的灵活字段，如果长，每个占用50％

2 个答案: