Looking for a way to make text wrap neatly inside a div?

I am working on a piece of code that includes 3 images with captions below them. I want to ensure that the width of the text does not exceed the width of the image, even though the image widths can vary. If the text extends beyond the image width, it should wrap. Additionally, I noticed an issue where the second and third images have some padding at the bottom, which should not be there.

Check out the code here

<div style="width:300px; overflow-x: auto;white-space: nowrap;">
    <div style="vertical-align:top">
        <div class="x">
            <img src="http://25.media.tumblr.com/avatar_dae559818d30_128.png" />
            <div style="white-space:wrap">Grumpy Cat is a famous cat</div>
        </div>
        <div class="x">
            <img src="http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" />
            <img src="http://playgo.ro/wp-content/themes/play3.0/play.png" style="position:absolute; left:0; top:0" />
        </div>
        <div class="x">
            <img src="http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" />
        </div>
    </div>
</div>
htmlword-wrapcss

Answer №1

If you're not setting a width for your div, make sure to do so and then apply white-space: normal;

<div style="white-space: normal; width: 130px;">Grumpy Cat is a famous cat</div>

Check out the Demo

I would advise against using inline styles.

When fixing the container div that only contains an image, it's recommended to use max-width and max-height for the img to prevent overflow.

Lastly, consider using a p element instead of a div as it adds semantic meaning to your content.

The property value wrap is invalid for white-space, use normal instead.

To eliminate white space on the sides, set a fixed width for the wrapper element. To address white space below the image, you can either set font-size: 0; on the wrapper and adjust font size for text, or use display: block; for the img element.

Answer №2

A simple solution is to enclose both your image and text within a single div. This ensures that as the size of your image increases, there will be enough space for the text to flow without extending beyond the boundaries of the image.

Answer №3

The width property is not included in your CSS code. For a demonstration, you can check out this DEMO

HTML

<div style=""><span class="text">Grumpy Cat is a famous cat</span>

CSS

 .text {
        vertical-align:top;
        display:inline-block;
        white-space:normal;
        word-wrap: break-word;
        width:70%;
        max-width:70%;
    }
    .x {
        border:1px solid #000000;
        display:inline-block;
        white-space:nowrap;
        position:relative;
        width:42%;
        vertical-align: top;
    }

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

"Challenges with Full-Width Dropdowns in Multi-level Mega Menus

I am currently attempting to design a multi-level mega menu that spans the full width of the screen, while keeping the content within it restricted to a maximum width of 1240px. I have managed to set the content to the maximum width, but I am facing challe ...

htmlcssdropdown

Effective ways to position images within a card alongside a changing title

I have a requirement for displaying multiple cards with dynamic titles fetched from the backend. The challenge is to align images in a row regardless of the title length, ensuring alignment based on the longest title. Below is an illustration of what I am ...

javascripthtmlcsssass

using JavaScript to send numerous text box values to various views

I have a dilemma with passing values between two views. In View1, there are text boxes for entering basic information. After the customer enters this data and clicks on 'add more details', I want to transfer these details to the text boxes in Vie ...

javascripthtmlrazor

Issue with Django Form not showing up on HTML after encountering an error

I have a question regarding my Django project. When a user sends a GET request, I need to display a form on the page. Here is the initial code snippet: form = SignUpForm() if request.method == 'POST': .... else: return render(request, & ...

pythonhtmldjangodjango-templates

Transition effect does not work properly when using ng-hide

I am currently working on an application that requires a button to be clicked in order to hide or show a specific element. To achieve this functionality, I am using ng-hide in AngularJS, but I am facing an issue where the transition is not working as expe ...

javascriptangularjscss

Guide on altering the background color of a table row depending on the data in its cells with the help of AngularJS

I am looking to dynamically change the background color of a row based on specific cell data. If the first four characters in a table cell match a certain value, I want the entire row to change its color to red. Currently, my code changes the row color ba ...

javascriptjqueryhtmlasp.netangularjs

What's the reason for the mousewheel functioning in Chrome but not in Firefox?

I am currently using CSS to enable scrolling up and down a popup page with just the mousewheel, but I'm facing an issue with it not working in FireFox. Surprisingly, it works fine in Chrome with the use of overflow-x:hidden; and overflow-y:auto; prope ...

javascriptjquerycss

Text being enveloped in a span tag

Currently, I have a table displaying a list of users with their corresponding roles. However, the roles column is sometimes wrapping before reaching the end of the line. The user list data looks like this: $scope.userList = [{ "id": 1, "name":"AB ...

javascripthtmlcssangularjs

Tips for disregarding line breaks in BeautifulSoup parser when using python

Here is my first question. I am currently utilizing BeautifulSoup to extract content from a website. The specific content I am targeting is located within a td tag, which can sometimes span two lines with a line break in the code. For example, when lookin ...

pythonhtmlbeautifulsouphtml-parsing

Transfer the @font-face declaration from the global CSS file into the MUI Theme

In my project, I have an index.css file that includes the following @font-face declaration: //Index.css ... @font-face { font-family: "My Font"; font-style: normal; font-display: swap; font-weight: 400; src: url(/public/fonts/my-font.eo ...

cssreactjsmaterial-uifontsfont-face

Resizable item within a text box (similar to an HTML editing tool)

After extensive searching online, I have not been able to find a solution. What I need is a draggable input element within a textarea in a text-editable div. The draggable textarea should be integrated seamlessly into the text, and upon submitting, it shou ...

jqueryhtmltextarea

What is the process for including multiple placeholders in an HTML document?

I have created a software application. <div id="todo-app"> <label class="todo-label" for="new-todo">What is your goal for today?</label> <input type="text" id="new-todo" class="todo-input" placeholder="go for a run" ...

html

Navigating through content using jQuery scroll bar

Could someone please assist me with scrolling the content on my website? For example, I have a link like this: <a href="#">content3</a> When a user clicks that link, I would like the content to scroll to div content3. I am looking for guidan ...

javascriptjqueryhtml

Show the extracted data on the following web page once it has been cleaned

I am looking to connect a python file with an HTML page using Flask application. On the first page (upload.html), the user is required to select the job field and job title from two dropdown menus. Afterwards, the user needs to upload a file containing a l ...

pythonhtmlpandasflask

What is the best way to centrally position a <mat-card> on the screen using Angular 9?

* I'm struggling to center a <mat-card> on the screen, specifically within the toggle-device-toolbar. It's intended for mobile phones and I could use some guidance. I'm working with angular-material and ng-bootstrap* Here is the code ...

cssangularbootstrap-4angular-materialng-bootstrap

Verify role declarations and display components if valid

I am currently developing an application using Angular on the front-end and ASP.NET on the back-end. Within this application, there are two roles: user and admin. I have implemented a navigation bar with several buttons that I need to hide based on the use ...

javascripthtmlangular

Building a personalized payment experience using Python Flask and Stripe Checkout

I'm attempting to set up a customized checkout integration with Stripe on my Flask web application and I've encountered some issues. After copying the code from the Stripe documentation (located at https://stripe.com/docs/checkout#integration-cu ...

javascriptpythonhtmlflaskstripe-payments

Using jQuery and JSON data to dynamically populate a second dropdown menu with filtered options

I am working on a form with two drop-down menus and a text box. The first drop-down contains static values, while the second drop-down is populated dynamically from a JSON array. My goal is to filter the options in the second drop-down based on the selecti ...

javascriptjqueryhtmljson

Creating an application for inputting data by utilizing angular material and javascript

I am looking to create an application using Angular Material Design, AngularJS (in HTML), and JavaScript. The application should take input such as name, place, phone number, and email, and once submitted, it should be stored in a table below. You can fin ...

javascripthtmlangularjs

Issues with CSS Min-Height in Various Web Browsers

Lately, I've been working on a website and trying to create a border that surrounds all my content and extends the full length of the page. The #Container div is supposed to expand to fill the entire page. I've tried using min-height:100%; in my ...

htmlcss