CSS - Implementing Multi-Line Text Wrapping

Can anyone provide some guidance on how to handle an issue where having too much text in the description of an image pushes the image up?

Thank you.

I have created a basic fiddle - resize the window to see them inline.

JSFiddle

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 30%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    display: inline-block;
    width: 15.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
htmlcssflexboxalignment

Answer №1

Thinking ahead, I realized that utilizing a flexbox approach would be the perfect solution for my current project.

Here is the CSS code I came up with:

.file-wrapper {
    flex-direction: row;
    flex-flow: row wrap;
    justify-content: center;
    display: flex;
}
.file-image {
    padding: 30px;
}

.file-box {
    text-align: center;
    padding: 1em;
    flex-basis: 10em;
    margin: 1em;
}

.fileTextWrapper {
    display: table;
    width: 100%;
    height: 3em;
}
.file-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}

The HTML structure is quite straightforward. The wrapper encompasses all the elements, with separate divs for the images and their corresponding descriptions. This method not only ensures responsiveness, but also centers the elements neatly and wraps the text effectively.

Answer №2

To ensure all divs align from the top, simply add vertical-align: top; to your .responsive div. Use the snippet below for reference:

div.gallery {
    border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 30%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    display: inline-block;
    width: 15.99999%;
    vertical-align: top;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
          
          
<div class="responsive">
    <div class="gallery">
        <img src="{{ asset('/img/zip.svg')}}" />
        <div class="desc">Description</div>
    </div>
</div>

<div class="responsive">
    <div class="gallery">
        <img src="{{ asset('/img/zip.svg')}}" />
        <div class="desc">Description Description</div>
    </div>
</div>

<div class="responsive">
    <div class="gallery">
        <img src="{{ asset('/img/zip.svg')}}" />
        <div class="desc">Description Description Description Description Description Description</div>
    </div>
</div>

Answer №3

My approach would be to implement the following style rules:

div.gallery {
  border: 1px solid #ccc;
  min-height: 200px;
}

With this implementation, all boxes would be of equal size.

Answer №4

To implement the same approach, utilize the flex property and update the CSS section below:

View updated code

div.gallery {
    border: 1px solid #ccc;
    display:flex;
    justify-content:center;
    flex-flow:column nowrap;
    align-items:center;
    padding:10px;
} 

div.gallery img {
    /* width: 30%; */
    height: auto;
}


div.gallery {
    border: 1px solid #ccc;
    display:flex;
    justify-content:center;
    flex-flow:column nowrap;
    align-items:center;
    padding:10px;
}
div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
   /* width: 30%; */
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    display: inline-block;
    width: 15.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
          
          
          <div class="responsive">
                <div class="gallery">
                        <img src="{{ asset('/img/zip.svg')}}"/>
                    <div class="desc">Description</div>
                </div>
        </div>
        
                 <div class="responsive">
                <div class="gallery">
                        <img src="{{ asset('/img/zip.svg')}}"/>
                    <div class="desc">Description Description</div>
                </div>
        </div>
        
                 <div class="responsive">
                <div class="gallery">
                        <img src="{{ asset('/img/zip.svg')}}"/>
                    <div class="desc">Description Description Description Description Description Description</div>
                </div>
        </div>

Answer №5

If you have a specific idea of what constitutes an appealing solution and haven't seen it suggested yet, you might consider employing the text-overflow ellipsis technique.

div.desc {
    padding: 15px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

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

When the user presses either the refresh button or the back button, they will be redirected

After the user presses refresh or uses the browser back button, I need to redirect them to a specific page in order to restart the application. My JavaScript code is as follows: var workIsDone = false; window.onbeforeunload = confirmBrowseAway; function ...

javascriptpythonhtmldjango-nonrel

Issue with color display inconsistency in webgrid across various segments

https://i.sstatic.net/UW17M.png My goal is to display section status colors in a webgrid and divide them percentage-wise, but I am facing issues with some of the rows. Here is the cshtml script for the webgrid section status: webGrid.Column(header: "Sec ...

htmlcssasp.net-mvcgridwebgrid

The website flickers in and out as it loads

My site keeps flashing whenever it loads. Despite trying the solutions recommended in this stackoverflow post, I have had no success. Every page on my website loads a nav.html file using this code: $.get("nav.html", function(data){     $("#nav-placeho ...

javascriptjqueryhtmlcss

What is the best way to ensure that the content fits within a div with a given max-width set by the parent div?

image description goes here I have a container set to a maximum width of 80%, but when the text inside extends beyond that, the container remains stuck at 80% instead of adjusting its size accordingly. Can anyone provide a solution for this issue? ...

cssstorybook

Incorporate h:outputText into your JavaScript code segment

After populating some information into a h:outputText, I am now looking to trigger a JavaScript function upon clicking a button that will retrieve the text from the outputText. The structure of the code is as follows: <p:tabView id="tabView"> & ...

javascripthtmlajaxjsf

What could be causing the error.status value to not be displayed on my Embedded Javascript (EJS) page?

Currently utilizing ejs, node.js & express along with other packages I'm facing an issue where the error.status and error.stack values are not appearing on the rendered page. I suspect that the error variable may be undefined or inaccessible within t ...

javascripthtmlnode.jsexpressejs

What are the best methods for visually comparing two HTML documents?

In the process of developing a Windows Forms application, my goal is to compare two HTML documents. The initial document is sourced externally and contains structural errors. To address this, an algorithm is utilized to optimize the HTML text, resulting in ...

htmlwinformswebview2

CSS3: What is causing this issue in FireFox?

http://jsfiddle.net/tNg2B/ It's clear that there is a noticeable difference when viewing this in Chrome compared to Firefox. The ":before" and ":after" pseudo classes seem to be malfunctioning in Firefox. Is there a way to resolve this issue? Edit: ...

firefoxcss

Creating a responsive grid layout with HTML and CSS

Is there a way to adjust the grid layout so that the second row of blocks align just below the corresponding block above instead of creating an entirely new row? http://jsfiddle.net/AndyMP/wSvrN/ body { margin-left: 0px; margin-top: 0px; marg ...

htmlcssgrid

Highlighting a Table Column with a Radio Button

I am struggling with controlling the highlight of a table using only radio buttons. When I try to change the selector to input:radio, it doesn't work as expected. It seems to only work with the selector provided in my code snippet. $("th").on("clic ...

javascripthtmlcss

What is the best way to transfer information between two views in Aurelia?

I have two different perspectives, one called logo and the other called folder. The logo view should display something from the folder view if the folder is empty. logo.html <template> <require from="company-assets/folders"></require> ...

javascripthtmlaurelia

Set a maximum height for the <td> element within a table, regardless of the length of the text in neighboring cells

Here is the situation I'm dealing with: In the thread, the postbit (blue box with avatar inside) looks fine for most posts (the first three). However, the fourth postbit is vertically elongated due to longer post content. I have been trying differe ...

htmlhtml-tablerowmybb

Retrieve outcome from successful AJAX post and update HTML using globalEval

I have a function in JQuery that asynchronously posts data function post_data_async_globalEval(post_url, post_data, globaleval) { $.ajax({ type: 'POST', url: post_url, data: post_data, dataType: 'html', async: true, ...

javascriptjqueryhtmlajax

Using jQuery to animate a div element with CSS3

After creating a loader using CSS3 and CSS3 Animations, I am looking to implement the actual loading function with jQuery based on a specified duration. For instance, setting it to load fully in 30 seconds. This is what I currently have: < ...

jqueryhtmlcss

Connect various inputs in Vue.js so they can be updated simultaneously

I need to have multiple text inputs that are interconnected, so when I change the value of one input, the others should update with the same value. These inputs are being generated dynamically in a loop using v-for as shown below: <tbody> <varia ...

javascripthtmlvue.js

Is it possible to center content with Bootstrap?

Is there a different method to center content with empty space on either side? For instance: <div class="col-md-3"></div> <div class="col-md-6"> <div class="form-group"> .... </div> </div> <div class="col ...

csstwitter-bootstrap

jquery script that retrieves the href attribute of the anchor tag located near the button that is currently being clicked

Hello there! I am trying to extract the href of a link when the button next to it is clicked by the user. However, the challenge is that there are multiple buttons and links on the page. For example, if the first button is clicked, I want to display "www. ...

javascriptjquerycss

Is there a way to transfer HTML code from a textarea to CKEDITOR for setData?

My goal is to retrieve data from a textarea element and use it as setData for CKEDITOR. However, instead of receiving the HTML code, I am only getting the code as a string, which is not rendering properly as HTML. Here's the code snippet: CKEDITOR.re ...

javascriptjqueryhtmlckeditorckeditor4.x

Two CSS files are loaded sequentially

Currently, when my HTML page loads, it first displays the styles from the initial CSS file before switching to the second CSS file. This brief moment where the page appears differently than intended is a bit frustrating. Is there a way to prevent this chan ...

htmlcss

Centered inline-block divisions

I've been coding for a number of years now, but I've recently started learning CSS. I'm currently facing an issue and need some help. I want to place two divs next to each other and center them. Here's the code I'm using: HTML: & ...

htmlcss