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

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

我有没有办法不借助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>

------------------------------------------------
|这是一个很长的名字…|这是一封很长的电子邮件|
------------- -------------------------------------
||
名称
电子邮件

@Newtang我已根据您的要求更新了JSFIDLE。展开和收缩页面时，如果页面宽度太小，将显示椭圆

这是链接

---

如果没有javascript，我认为唯一可行的解决方案是为每个脚本提供50%的

最大宽度

，并且在文本溢出时使用带省略号（…）的

文本溢出

唯一的问题是，例如，如果名称非常小，如果电子邮件非常大，它将仅显示整个宽度的50%

我做了这把小提琴：

（我也同意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>

H3和h4元素在这里似乎在语义上不合适。标题应该是内容的标题部分。也许表格或定义列表更合适？这是一个很好的观点，@cimmanon，谢谢。我忽略了这一点。没有看到一个好的纯CSS解决方案在这里与省略号要求（表与flexbox）。增加了额外的要求，成为一个单一的行。
<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>

.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;
}