0

我深入研究了这个问题，在我周围的所有树木中都看不到森林......但也许有一个快速的解决方案。我使用 CSS 3，不能在一行中添加 2 个 div，条件如下： 1. DIV 动态宽度和剪切文本。2. DIV 旁边 1. DIV (inline) with fixed with。

所以如果容器（环绕 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。

谢谢你的提示。

4

2 回答 2

0

有两个问题：

于 2011-10-12T12:23:37.477 回答
0

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

    <!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>
于 2011-10-13T01:34:09.783 回答