0

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

无论如何，我可以在不使用 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>
4

2 回答 2

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;
}
于 2013-10-01T18:39:14.780 回答
1

如果没有 javascript，我认为唯一可行的解​​决方案是给max-width每个 50% 的 a text-overflow，当文本溢出时，a 带有省略号 (...)...

唯一的问题是，例如，如果名称非常小，如果电子邮件非常大，它将仅占据整个宽度的 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;
}
于 2013-10-01T18:40:06.220 回答