0

私はこの問題に深く関わっており、周りのすべての木から森を見ることができません... しかし、これには簡単な解決策があるかもしれません. 私は CSS 3 を使用していますが、次の条件では 1 行に 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 を下回っています。

ヒントをありがとう。

4

2 に答える 2

0

2つの問題があります：

于 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 に答える