Question

我深入研究了这个问题，看不到周围所有树木的森林......但也许有一个快速解决方案。我使用CSS 3并且不能在以下条件的一行中添加2个div： 1. DIV动态宽度和切割文字。 2. DIV旁边1. DIV（内联），固定为。

所以如果容器（周围的DIV）是300px。 2. DIV是100px。我希望1. DIV的大小为200px（动态）并在需要时剪切其文本。

所以这是我到目前为止的代码：

<!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>

不幸的是，2.DIV始终低于1. DIV。

谢谢您的提示。

Answer 1

有两个问题：

Divs generete一个框，所以每行只有一个div，所以你需要display属性来改变它（见http://www.w3schools.com/cssref/pr_class_display.asp）
具有动态宽度的元素尝试获取内部文本所需的空间，因此它会强制下一行中的另一个div，尝试使用css3列（请参阅http://www.w3schools.com/cssref/css3_pr_column-count.asp）

Answer 2

好的，我找到了合适的解决方案：

    <!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 个答案: