如何用溢出组织这个布局？答案

【问题标题】：How to organize this layout with overflows?如何用溢出组织这个布局？
【发布时间】：2011-12-07 10:58:05
【问题描述】：

我在某些 div 的位置和布局方面遇到了问题。

我想要的布局：

我希望标题始终完整显示在右侧。副标题应出现在左侧，但会隐藏任何溢出，因此标题的长度始终优先。

我有以下代码：

<html>
<head>
   <style type="text/css">
      .title {height: 25px; text-align:left; width: 300px; border:1px solid red;}
      .subtitle {height: 20px; overflow:hidden; float:left; border: 1px solid blue;}
    </style>
</head>

<body>
   <div class="title">
      Title number 1
      <div class="subtitle">This is subtitle that is longer with even more text</div>
   </div>
</body>
</html>

如果字幕太长，它只会悬停在下方。有什么想法吗？

【问题讨论】：

我认为将标题放在左边，副标题放在右边会更有意义。
谢谢，但我用“标题”和“副标题”替换了我的真实数据作为示例。不过你是对的，不好的例子！

标签： css layout html

【解决方案1】：

现在是使用text-overflow: ellipsis 的好时机。

http://jsfiddle.net/thirtydot/sxeu9/

HTML：

<div class="row">
    <div class="title">Title number 1</div>
    <div class="subtitle">This is subtitle that is longer with even more text</div>
</div>

CSS：

.row {
    width: 200px;
    float: left;
    border: 1px dashed #444;
    padding: 3px;
}
.title {
    float: right;
    border: 1px solid #666;
}
.subtitle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 1px solid #f0f;
}

【讨论】：

【解决方案2】：

嗨，它可能不是完美的解决方案，但它正在工作...... 这可能是一个好的开始。

我使用绝对定位将主标题置于副标题之上，并在主标题 div 中使用颜色背景隐藏副标题文本。

<html>
<head>
   <style type="text/css">
.title {
    height: 25px; 
    width: 300px; 
    position: relative;
}
.maintitle
{
    height: 25px; 
    border:1px solid red;
    font-size: 21px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding-left: 10px; /* to give space to the left on the main title */
    background-color: #ffffff; /* to hide the text under it. */
}
.subtitle {
    height: 20px; 
    overflow:hidden; 
    border: 1px solid blue;
    max-width: 290px; /* to make sure the sub-title dont fall on two line */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

    </style>
</head>

<body>
   <div class="title">
        <div class="maintitle">
            Title number 1
        </div>  

        <div class="subtitle">
            This is subtitle that is longer with even more text
        </div>
   </div>
</body>
</html>

【讨论】：

【解决方案3】：

这是一个似乎可行的尝试：http://jsfiddle.net/3nCuJ/（在下面详细说明）

具体来说，我使 title 向右浮动，而不是副标题向左浮动。这确保整个标题在副标题之上可见。然后为了正确制作字幕剪辑，我添加了一个内部 div 来包含字幕文本。

如果您希望字幕在单词边界处停止，请改用：http://jsfiddle.net/3nCuJ/1/

HTML：

<div class="outer">
  <div class="title">Title number 1</div>
  <div class="subtitle"><div class="subtitle_inner">This is subtitle that is longer with even more text</div></div>
</div>

CSS：

.outer {
    height: 25px;
    width: 300px;
}
.title {
    height: 23px;
    float: right;
    border:1px solid red;
}
.subtitle {
    height: 23px;
    overflow:hidden;
    border: 1px solid blue;
}
.subtitle_inner {
    width: 300px;
}

【讨论】：