Блог

Главная - Вопросы по программированию - Два Div рядом друг с другом с надписью «text-overflow: многоточие; переполнение: скрытый; пробел: nowrap;»

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

#html #ellipsis

#HTML #многоточие

Вопрос:

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

Итак, если контейнер (округление DIV) равен 300 пикселей. А 2. DIV равен 100 пикселей. Я ожидаю, что 1. DIV получает размер 200 пикселей (динамический) и при необходимости сокращает его текст.

Итак, это код с моей стороны до сих пор:

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

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

Ответ №1:

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

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

Ответ №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>