DIV ширина в зависимости от ширины IMG. Внутри переполнения текста

Question

У меня есть элемент DIV, который содержит IMG и текст одной строки под этим изображением. Я хотел бы сделать это, содержащее DIV той же ширины, что и ширина изображения, а переполненный текст скрыт, вероятно, с overflow:hidden.

Есть ли способ, как это сделать в HTML и CSS, или я должен использовать JavaScript в этом случае? (мне не нужно решение JS)

EDIT: извините, я, вероятно, следует упомянуть еще несколько деталей. Размер изображения неизвестен, потому что на самом деле на странице есть много таких элементов: DIV, с разными изображениями, а в описании под изображением есть 4 линии по-разному. Я написал «ONE LINE» только потому, что только одна строка должна быть установлена ​​с переполнением.

Answer 1

Существует способ сделать это с помощью CSS, но это не отличное решение, и я бы не рекомендовал его (решение ниже). Однако вы можете сделать это очень просто с помощью jQuery. Установите ширину контейнера, чтобы быть размер вашего изображения на странице загрузки и использовать nowrap для пробельных, чтобы заставить текст на одной строке (скрытый с overflow:hidden)

CSS

.wrapper{ 
    overflow: hidden; 
    white-space: nowrap; 
} 

JS

var imgWidth = $("img").width(); 

$(".wrapper").css("width", imgWidth+"px") 

JS EXAMPLE

Чтобы расширить пример использования TreeTree для использования position: absolute. Вместо того, чтобы установить обертку в относительную и использовать текст bottom:0, вы можете обернуть свой контент в контейнер div, который установлен в relative. Таким образом, вам не придется беспокоиться о размещении текста, чтобы получить его там, где вы хотите, потому что ДИВ (который является блок-элемент) будет сидеть ниже вашего изображения, чтобы начать с:

.wrapper{ 
    display: inline-block; 
    overflow: hidden; 
    padding-bottom: 60px; //some value to show content 
} 

.content-wrapper{ 
    position: relative; 
} 

.content-wrapper p{ 
    position: absolute; 
    white-space: nowrap; 
} 

CSS EXAMPLE

Но между этими двумя я пошел бы с версией JS. CSS-это хорошая концепция, но немного взломанная. Вам нужно использовать отступы, чтобы отобразить текст, потому что его расположение удаляет его из потока документа, поэтому не регистрирует высоту или ширину. В зависимости от того, для чего вы это используете, создание базы кода вокруг этого может привести к возникновению некоторых серьезных проблем в будущем.

Answer 2

Если текст всегда будет одной строкой, вы можете сделать его абсолютным и добавить отступы в контейнер.

.cont { 
    background:orange; 
    display:inline-block; 
    position:relative; 
    padding-bottom:20px; 
    overflow:hidden; 
} 

.img { 
    width:100px; 
    height:50px; 
    background:yellow; 

} 

p { 
    position:absolute; 
    white-space:nowrap; 
    margin:0; 
    bottom:0; 
} 

FIDDLE

Answer 3

Это same thing, как @ jmore009 решение, но с использованием родной JavaScript и id элементы:

var imgWidth = document.getElementById("myImg").width; 
document.getElementById("wrapper").style.width = imgWidth+"px"; 

Answer 4

Есть несколько способов сделать это в HTML и CSS, но они, вероятно, все несколько искусственны.

Во-первых, обратите внимание, что просто установка фиксированной ширины, такой же, как ширина изображения, в тексте, с простым механизмом для скрытия переполнения, удовлетворит вопрос по запросу. Пример:

.ex1 { 
 
    width: 300px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<div class=ex1> 
 
<img src="http://lorempixel.com/300/100/" alt="(a demo image)"><br> 
 
This is some text under the image. The request is to make the overflowing part hidden. 
 
</div>

Однако вопрос, вероятно, намеревался спросить, можно ли сделать это без жесткого кодирования ширины изображения в настройки CSS для div. Такое жесткое кодирование может быть наиболее практичным. Причина в том, что для других подходов требуется более сложный код.

Вот один из возможных подходов: Поместите изображение в таблицу с одной ячейкой и установите текст в виде таблицы, расположенной под таблицей. (Пуристы могут попытаться сделать это, используя таблицу CSS.) Вам нужна внутренняя оболочка для текста, поскольку управление переполнением, похоже, терпит неудачу, когда применяется непосредственно к элементу caption. И вы должны позволить потоку текста вертикально; в противном случае он расширяет ширину таблицы. Для этого установите высоту обертки так, чтобы она соответствовала высоте одной строки.

.ex2 caption span { 
 
    display: block; 
 
    text-align: left; 
 
    line-height: 1.3; 
 
    height: 1.3em; 
 
    overflow: hidden; 
 
    word-break: break-all; 
 
}

<table cellspacing=0 class=ex2> 
 
<caption align=bottom><span>This is some text under the image. The request is to make the overflowing part hidden.</span></caption> 
 
<tr><td><img src="http://lorempixel.com/300/100/" alt="(a demo image)"> 
 
</table>