两个Div相邻，并带有“文本溢出：省略号；溢出：隐藏；空白：nowrap；”

Question

I got to deep in this problem and can not see the forest out of all the trees around me... but maybe there is a quick solution for this. 我深陷这个问题，无法从我周围的所有树木中看到森林……但是也许有一个快速的解决方案。 I work with CSS 3 and cannot add 2 div's in one line with the following condition: 1. DIV dynamic width and cutting text. 我使用CSS 3，在以下情况下无法在一行中添加2 div：1. DIV动态宽度和剪切文本。 2. DIV next to 1. DIV (inline) with fixed with. 2. DIV旁边的1. DIV（内联）带有固定用。

So if the container (sourounding DIV) is 300px. 因此，如果容器（环绕声DIV）为300px。 And the 2. DIV is 100px. 而2. DIV为100px。 I expect that the 1. DIV gets a size of 200px (dynamic) and cutting its text if needed. 我期望1. DIV的大小为200px（动态），并在需要时剪切其文本。

So this is the code from my side so far: 所以这是到目前为止我的代码：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .container {
            width: 200px;
            border: 1px solid black;
        }
        .info {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .dynamicWidth {

        }
        .staticWidth {
            width: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="dynamicWidth">
            <div>Title element</div>
            <div class="info">Text: This is a text which should be break with 3 dots when it is bigger then its parent div</div>
        </div>
        <div class="staticWidth">BUT</div>
    </div>
</body>

Unfortunately, all the time the 2. DIV is below the 1. DIV. 不幸的是，一直以来2. DIV都低于1. DIV。

Thx for your hints. 谢谢你的提示。

Answer 1

There are two problems: 有两个问题：

Divs generete a box, so theres only one div per line, so you need the display property to change this (see http://www.w3schools.com/cssref/pr_class_display.asp ) Divs产生一个框，因此每行只有一个div，因此您需要display属性来更改它（请参见http://www.w3schools.com/cssref/pr_class_display.asp ）
The element with the dynamic width tries to get the space the inner text requires, so it forces the other div in the next line, try using css3 columns (see http://www.w3schools.com/cssref/css3_pr_column-count.asp ) 具有动态宽度的元素会尝试获取内部文本所需的空间，因此会在下一行强制使用另一个div，请尝试使用css3列（请参阅http://www.w3schools.com/cssref/css3_pr_column-count.asp ）

Answer 2

Ok, I found a fitting solution: 好的，我找到了合适的解决方案：

    <!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .container {
            border: 1px solid black;
            position: relative;
        }
        .info {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .dynamicWidth {
            margin-right: 30px;
        }
        .staticWidth {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            top: 25%; /*centers the content of this div in middle of height*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="dynamicWidth">
            <div>Title element</div>
            <div class="info">Text: This is a text which should be break with 3 dots when it is bigger then its parent div</div>
        </div>
        <div class="staticWidth">BUT</div>
    </div>
</body>

两个Div相邻，并带有“文本溢出：省略号；溢出：隐藏；空白：nowrap；”

问题描述

2 个解决方案

解决方案1
0 2011-10-12 12:23:37

解决方案2
0 已采纳 2011-10-13 01:34:09

两个Div相邻，并带有“文本溢出：省略号； 溢出：隐藏； 空白：nowrap；”

问题描述

2 个解决方案

解决方案1 0 2011-10-12 12:23:37

解决方案2 0 已采纳 2011-10-13 01:34:09

两个Div相邻，并带有“文本溢出：省略号；溢出：隐藏；空白：nowrap；”

解决方案1
0 2011-10-12 12:23:37

解决方案2
0 已采纳 2011-10-13 01:34:09