When the browser width is reduced, the text appears outside of the image

When pasting text into an image in this example, everything looks fine at first. However, as the browser width is reduced, the text starts slipping out of the picture.

To make matters worse, unsightly line breaks are also added.

Is there a way to prevent these two issues?

I'm looking for a solution that doesn't involve using scrollbars.

This thread discusses long text going outside the div

For reference, you can view an example here: 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>

htmlimagecss

Answer №1

Consider adding overflow: hidden; to the CSS definition for the < h2 > element.

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

Also, update the .image CSS class with the following:

.image {
    position: relative;
    height: auto;
    overflow-x: hidden;
}

Based on your feedback, it seems you want padding around the darkened area with text. I have modified your HTML by enclosing the <h2> tags within a div. Instead of applying the darker background in the <h2> tag, we are applying the style on the <div> wrapping the <h2> elements.

Additionally, use min-width to set the minimum width of the wrapper to prevent text from wrapping beyond the image height.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Establish limits for draggable item

I am working on a project where I have a draggable element generated dynamically using jQuery. The div containing the element also has a background image. How can I ensure that the draggable element never goes outside of the boundaries of the div? If you ...

jqueryhtmljquery-uicss

Showing data in a grid format on a webpage

I created a Java program that generates an array list with values such as Hi, Hello, How, Are, You, Me, They, and Them. In addition, I developed a basic controller to convert these values into JSON format and display them on localhost:8090/greeting like t ...

javahtmljsonajaxweb

Why Won't My PHP Form Submit on a Bootstrap Website?

I'm struggling with validation and need some assistance. I have a Bootstrap form embedded within an HTML page and a PHP script to handle the submission. However, whenever someone clicks on Submit, the page redirects to display my PHP code instead of a ...

javascriptphpjqueryhtml

Using JavaScript to create temporary drawings on a webpage that automatically erase themselves

I am curious about how to achieve a scribble effect that self-erases, similar to what is seen on this website: Example: Thank you! I have come across some similar scripts, but I am struggling to understand how to make the scribble disappear after a few ...

javascripthtmlcss

What is the most efficient way to retrieve key pair values of separate elements in an array with just one API request?

The API I am working with returns an array of elements, each containing multiple key-value pairs. An example of a similar API response can be seen here: , where an array of poems is returned. [ { "title": "...." "content": "..." "url" : "..." } ...

javascripthtml

Methods to maintain the select2 dropdown event open while interacting with another select2 dropdown

I have a situation where I need to dynamically add a class to a div whenever a select2 dropdown is open. To achieve this functionality, I am utilizing the open and close events of select2. The current code successfully adds the class when opening a selec ...

javascriptjqueryhtmlcssjquery-select2

Is it possible to create a dynamic <hr /> using Flexbox?

In the midst of working on my application, I managed to achieve a simple layout. However, there is one peculiar requirement that has been eluding me for the past 2 days and now I find myself in need of assistance. Here is the current HTML code I am workin ...

javascripthtmlcssangularflexbox

The __init__() function in Django encountered an error with the unexpected keyword 'user' being passed

Currently, I am working on establishing a password reset system using the default django libraries. However, I have encountered an error trace while trying to access the site for changing passwords (PasswordChangeConfirm). Internal Server Error: /reset/con ...

pythonhtmldjangowebpasswords

Ways to retrieve the user's IP address and provide the information in JSON format

Although I am not an expert in PHP, I specialize in developing Android apps. One of the challenges I face is extracting the user's IP address from a specific URL . This URL provides various information when accessed, but my main requirement is to retr ...

phpandroidhtmljsonparsing

Ways to adjust the color of a cell in a table

I am working on customizing a table in my website where I need to change the color of a single cell in each row, similar to the example shown in this image: https://i.sstatic.net/1wtit.jpg Here is the HTML code that I have implemented so far: < ...

javascripthtmlhtml-table

"Discrepancy found in results between Node-Fetch POST and Firefox POST requests

I have encountered a challenge while trying to replicate a successful log-in process on a website using node-fetch after being able to do so with Firefox. The login process consists of three stages: Visiting /login which returns a sessionToken from the we ...

javascripthtmlhttpweb-scrapingfetch

Guide to dynamically insert rows in HTML using Vue.js based on the selected option

This is the initial row. Depending on the selection made here, different rows will be displayed <div class="row"> <div class="col-md-4"> <div class="form-group label-floating"> <label class="control-label">Case Type< ...

javascriptjqueryhtmlvue.jsvue-component

What steps can I take to stop my html table from expanding beyond its intended size

There are instances where the length of a data piece in one of my table cells causes it to expand and distort the overall layout of the table. Is there a way to avoid this from happening? ...

htmlcss

ensuring that all items in the owl Carousel have equal heights

My current project involves creating an Owl Carousel. Here is the code I have implemented so far: <div class="owl-carousel owl-theme"> @foreach (var item in Model.Books) { <div class="item"> ...

htmlcssbootstrap-4owl-carouselowl-carousel-2

Learn how to display separate paragraphs upon clicking a specific item

New to coding and eager to learn, I have recently started exploring HTML, CSS, and basic JavaScript. In my journey to enhance my skills, I am working on building a website for practice. One particular page of the site showcases various articles, each acc ...

javascriptjqueryhtml

Utilizing jQuery for displaying or hiding list elements

To view all the code, click on this link: http://jsfiddle.net/yrgK8/ A section titled "news" is included in the code snippet below: <ul id="news"> <li><p>asfdsadfdsafdsafdsafdsafdsafdsafdsa</p></li> <li>&l ...

javascriptjqueryhtmlcssslideshow

Enhance your JQuery skills by implementing variables within the .css() function

Attempting to randomly assign values to an image's left and right properties using JQuery. Here is the code snippet: var sides = ["left", "right"] var currentSide = sides[Math.floor(Math.random() * sides.length)]; $("#"+currentImage).css({currentSide ...

javascriptjquerycss

Offspring of a parent with a "flex: 1" attribute and a grandparent with a "min-height" property defying the "width: 100%" rule

Is it possible to have a hidden footer just below the screen's bottom and allocate the remaining height to content children without inheriting max-height all the way down? The "Grand child" element is not occupying the full height: body { marg ...

htmlcss

Modify the default background color for the chosen element in the tree structure

Could someone assist me in changing the default background color of a selected element in the tree? Below is the XHTML code: <style type="text/css"> .ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state- ...

cssprimefaces

What could be causing my divs to overlap one another?

I can't seem to get these divs to stack properly, they keep overlapping. I've tried removing the float and checking every attribute in the code. I'm not sure where I'm going wrong. The structure of the rest of the page is similar, but ...

htmlcss