Текст находится за пределами изображения, при уменьшении ширины браузера - PullRequest
Новая
       1

Текст находится за пределами изображения, при уменьшении ширины браузера

0 голосов
/ 31 мая 2018

Если я вставлю текст в изображение, то в этом примере это выглядит нормально.Но если я уменьшу ширину браузера, то текст исчезнет с картинки.

Кроме того, добавлены неприглядные разрывы строк.

Как я могу предотвратить эти две вещи?

Должно быть решение без полосы прокрутки.

Длинный текст находится за пределами div

Вот пример: https://jsfiddle.net/1228sbg7/3/

.image { 
   position: relative; 
   width: 33%;
   height: auto;
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

h2 span.spacer {
   padding:0 5px;
}
<div class="image">

      <img src="https://www1.xup.in/exec/ximg.php?fid=21049048" alt="" />
      
      <h2><span>Lorem ipsum dolor sit amet:<span class='spacer'></span><br /><span class='spacer'></span>consetetur sadipscing elitr</span></h2>

</div>

1 Ответ

0 голосов
/ 31 мая 2018

Попробуйте добавить overflow: hidden; в определение CSS для элемента

. h2 { position: absolute; top: 200px; left: 0; width: 100%; overflow: hidden; } Кроме того, замените определение класса CSS .image следующим: .image { position: relative; height: auto; overflow-x:hidden; } Дополнительные правки, основанные на ваших комментариях. Похоже, вы действительно хотите заполнить затемненную область текстом.Я изменил ваш HTML, добавив теги <h2> в div.Вместо применения более темного фона в теге <h2> мы применяем стиль к элементу <div>, охватывающему элементы <h2>. Затем используйте min-width, чтобы установить минимальную ширину вашей обертки, чтобы текст не обернулся выше высоты вашего изображения. body { padding:0px; margin:0px; } .image { position: absolute; width: 33%; height: auto; } .darkerDiv { background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.7); padding: 5px 10px; position: absolute; top: 200px; left: 0; text-align:left; min-width:170px !important; overflow:hidden; } .darkerDiv h2 { width: 100%; margin: 0px; padding: 0px; } .darkerDiv h2 span { color: white; font: bold 24px/45px Helvetica, Sans-Serif; letter-spacing: -1px; } .darkerDiv h2 span.spacer { padding: 0 5px; } <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="StyleSheet2.css" /> </head> <body> <div class="image"> <img src="https://images.pexels.com/photos/301599/pexels-photo-301599.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=250&w=400" alt="" /> <div class="darkerDiv"> <h2><span>Lorem ipsum dolor sit amet: <br /> consetetur sadipscing elitr</span></h2> </div> </div> </body> </html>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...