Guide on making text stack up in response to changing the size of the browser window

Issue arises when resizing the browser window, causing the first text to break. The objective is to display the entire sentence without breaking words, regardless of window size. Attempts have been made with queries, but the correct solution remains elusive. Refer to the image for a clearer understanding of the problem.

<div class="row">
    <div class="col-sm-7">
        <ul class="list-inline">
            <h2>
                <li class="list-inline-item">LYD</li>
                <li class="list-inline-item">&#9702;</li>
                <li class="list-inline-item">LYS</li>
                <li class="list-inline-item">&#9702;</li>
                <li class="list-inline-item">LED</li>
                <li class="list-inline-item">&#9702;</li>
                <li class="list-inline-item">AV</li>
            </h2>
        </ul>
    </div>
          
    <br>
    
    <div class="col-sm-5">
        <div class="middle">
            <h2>
                <span class="glyphicon glyphicon-earphone"></span> 57 67 18 14
            </h2>
      </div>
    </div>
          
</div>

CSS:

ul li { display: inline; }

ul.list-inline{
    text-align: center;
    padding-right: 15px;
}

.middle{
    margin-bottom: 60px;
    padding-right: 15px;
}

https://i.sstatic.net/3hKpZ.gif

Answer №1

The issue at hand involves the width inheritance of the content, specifically the list and list items, from the encompassing col-7 element. If you are aware of the precise width of the text, you can simply assign an exact width property to it-

ul {
    width: 302px;
}

Alternatively, for a more flexible approach, you can utilize either white-space or max-content

/* white-space */ 
ul {
    white-space: nowrap
}

/* max-content*/
ul.list-inline {
    width: intrinsic;           /* Safari/WebKit uses a non-standard name */
    width: -moz-max-content;    /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
}

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

How can one safeguard their JavaScript code from potential threats and unauthorized access?

How can I ensure that a web app is not accessible or operated from the local file system? The app has a custom front-end workspace created with JS and various libraries, which should only be usable when the user is logged in to the domain with an active i ...

What's the best way to position the <li> element beneath the hamburger icon?

Is there a way to place the list element 'Home' below the hamburger icon and logo in Bootstrap 4 in mobile mode? I attempted to display the logo as style="display: block" with no success. <div class="container"> <nav class="navbar nav ...

Stopping the sound when its' Div is hovered over

I've managed to successfully trigger the audio to play on hover, but I'm having trouble getting it to pause when my mouse leaves the area. Check out the code in action here: https://jsfiddle.net/jzhang172/nLm9bxnw/1/ $(document).ready(functio ...

Choose an element by its specific data attribute

I have come across this html code and I am attempting to assign a new class to it using the data attribute: <p class="form-row form-row-wide" data-child-field="child_has_jacket"> </p> Even after trying with jQuery : jQuery( ...

Adjust the appearance of a glyphicon by modifying its color according to various criteria

Using angularjs, I implemented ng-repeat to display details in a table. In the final column, I aim to display the glyphicon 'glyphicon glyphicon-stop' in a specific color. <tr ng-repeat="ps in $ctrl.personLst"> <td>{{ ps.id}}</td& ...

Is there a way to apply the 'absolute' or 'fixed' with a width of 100% to the parent div specifically, rather than to the window size?

I would like to create a banner similar to the one shown here: https://i.sstatic.net/SZLr9.png I am attempting to achieve this using 'absolute' or 'fixed' positioning. However, when I tried using 'left: 0 right: 0 top: 0', i ...

Using the margin property creates an odd spacing issue that seems out of place

Here is the HTML and CSS code that I am using: div { background: yellow; width: 77px; height: 77px; border: 1px dotted red } #one { margin: 0px 21px 41px 41px } <html> <head> <meta charset="UTF-8"> ...

How to apply distinct CSS styles to individual pages in Orchard CMS?

If we have two pages within Orchard CMS - the homepage and the About Us page, is there a way to include a RoyalSlider on just the homepage without affecting the About Us page? Within Orchard CMS, I am utilizing the Contoso theme. Previously, I attempted t ...

What is the best way to align my navigation bar in the middle of two elements with different

I've been struggling with my code for the past couple of days, but nothing seems to be working. I need the navigation bar to be perfectly centered between two elements (<img> and <form>). Right now, it's almost centered, but it starts ...

What could be causing spacing problems with fontawesome stars in Vue/Nuxt applications?

Currently, I am working on implementing a star rating system in Nuxt.js using fontawesome icons. However, I have encountered an issue where there is a strange whitespace separating two different stars when they are placed next to each other. For instance, ...

Tips for customizing font color on Google Maps Marker Clusterer

Is there a way to adjust the font color of a markerclusterer marker? Below is my current code for customizing the marker's style: mcOptions = {styles: [{ height: 27, url: "image.png", width: 35 ...

Struggling to stack two forms on top of each other within a Bootstrap row class

I am trying to incorporate 2 forms on a web page, one below the other. Here is what I have: <body id="Signup"> <form class="row col-lg-6"> <legend>Légende</legend> <div class="form-group"> ...

Top tips for seamless image transitions

Currently working on a slideshow project and aiming to incorporate smooth subpixel image transitions that involve sliding and resizing, similar to the Ken Burns effect. After researching various techniques used by others, I am curious to learn which ones ...

Positioning a div beyond the visible area without altering its original width, with the assistance of the Skrollr plugin

I'm currently experimenting with a parallax website using Skrollr. My goal is to achieve a curtain effect where two divs slide open left and right as I scroll down. The issue I'm facing is that when I scroll, the divs extend beyond the 100% widt ...

The search box implemented in the navbar of AngularJS retrieves data to display in a table

Hey there! I'm trying to filter a table of data using a navbar search box located outside the view where the table is displayed. Struggling to figure out how to make this work. Here's the code snippet for the search box inside the navbar: <di ...

What steps should I take to correct the alignment of this grid using CSS?

I'm currently working on creating a grid layout for my website and I've almost achieved the desired result. However, I'm facing an issue with the size of the "Projects" title within the grid. I want it to stand out and be larger compared to ...

Creating an HTML table that adjusts to the screen height with square-shaped cells

var grid = document.getElementById("grid"); var size = 50; for (var y = 0; y < size; y++) { var currentRow = grid.insertRow(0); for (var x = 0; x < size; x++) { var currentCell = currentRow.insertCell(-1); currentCell.style.height = currentCell.styl ...

Is there a way to position the twitter embed at the center of a webpage?

I am attempting to embed a Twitter video and twit in such a manner that they are perfectly centered on the page and also take up the entire width of the container (my-container). Here is the HTML code that I currently have: <div class="my-container"&g ...

Tips for concealing a complete class without causing any issues

My attempt at creating a quiz feature has been a challenge. I wanted each section of the quiz to open as I move through the questions. Here are the initial two parts of the quiz. function initialize() { var section = document.getElementsByClassName("p ...

The appearance of HTML dropdown select options is unappealing when viewed on iPhones

Looking for a simple alternative to the dropdown menu implementation on iPhones/iOS for a mobile website (not native app). Any suggestions using HTML/CSS/JavaScript? <!DOCTYPE html> <html> <head> <meta name="viewport" content="initi ...