Два Div рядом друг с другом с «переполнением текста: многоточие; переполнение: скрыто; пробел: nowrap;» - PullRequest
Новая
       11

Два Div рядом друг с другом с «переполнением текста: многоточие; переполнение: скрыто; пробел: nowrap;»

0 голосов
/ 12 октября 2011

Я углубился в эту проблему и не вижу леса среди всех деревьев вокруг меня ... но, возможно, есть быстрое решение для этого.Я работаю с CSS 3 и не могу добавить 2 деления в одну строку со следующим условием: 1. Динамическая ширина DIV и обрезка текста.2. DIV рядом с 1. DIV (inline) с фиксированным значением.

То есть, если контейнер (sourounding DIV) равен 300px.И 2. DIV составляет 100 пикселей.Я ожидаю, что 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.

Спасибо за ваши подсказки.

Ответы [ 2 ]

0 голосов
/ 13 октября 2011

Хорошо, я нашел подходящее решение: 

    <!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>
0 голосов
/ 12 октября 2011

Есть две проблемы:

  • Div генерирует окно, поэтому в строке только один div, поэтому вам нужно изменить это свойство display (см. http://www.w3schools.com/cssref/pr_class_display.asp)
  • Элемент с динамической шириной пытается получить пространство, необходимое внутреннему тексту, поэтому он заставляет другой div в следующей строке, попробуйте использовать столбцы css3 (см. http://www.w3schools.com/cssref/css3_pr_column-count.asp)
...