What is the best way to create text that dynamically wraps or moves to the next line?

My design has a slight issue:

https://i.sstatic.net/riLOQ.png

The text in the middle sometimes ruins the look. For reference, check out this https://i.sstatic.net/mdNd8.png

I need the text to go down and continue from where it started after reaching a certain number of characters. Can someone please assist me with this? I'm a beginner.

Here's my HTML setup:

<div class="title-body">
  <h4 id="title"></h4>
  <div class="info">
    <span class="company"><a href="#"><i data-feather="briefcase"></i><span id="company_name"></span></a></span>
    <span class="office-location"><a href="#"><i data-feather="map-pin"></i><span id="company_location"
          style="word-break: break-all;width:14px;"></span></a></span>
    <span class="job-type full-time"><a href="#"><i data-feather="clock"></i><span
          id="employment_status"></span></a></span>
  </div>
</div>

CSS

element.style {
    word-break: break-all;
    width: 14px;
}

.job-title-and-info .title .title-body .info span {
    font-size: 1.4rem;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    margin-right: 15px;
    color: #6f7484;
htmlcss

Answer №1

Make sure to include a max-width property in your CSS.

To implement this, consider inserting the following code snippet into your CSS stylesheet:

.business-hours {
    display: block;
    // Adjust max-width value according to your design requirements.
    max-width: 150px;
}

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

Best methods for deleting an element's attribute or style attribute

Imagine this snippet of CSS code: .notif-icon { display: inline-block; } In my HTML, I have the following element which starts off hidden by overriding the display property of the notif-icon class: <span id="error" class="notif-icon& ...

javascripthtmlcss

Tips for incorporating a visible HTML comment in JSX code?

Currently implementing ReactJS and facing a requirement to insert visible HTML comments (visible in the html source) within JSX. Unsure of the correct approach to achieve this. A third party vendor necessitates this comment for processing purposes on the ...

htmlreactjscommentsjsx

Implementing column resizing functionality similar to Bootstrap using inline CSS for HTML email layout

Utilizing Bootstrap CSS in an HTML page creates a responsive Grid layout system, allowing columns to expand or shrink based on the screen size. By declaring grid columns using classes like col-sm-12 and col-md-6, we can control the layout effectively. I a ...

htmlbootstrap-4html-email

Incorporating a full-page background into a specific view using AngularJS

In order to implement a fullscreen CSS background for a specific view in my app, I attempted adding a class to the body. However, this approach caused the background to persist in the cache and remain visible when switching views. The challenge arises fro ...

javascriptjquerycssangularjs

Is there a space added after applying overflow:hidden to a div?

.d1 { height: 10px; } .dd { display: inline-block; overflow: hidden; } .dd1 { display: inline-block; } <div class="d1"> <div class="dd"></div> <div class="dd1"></div> </div> To adjust the layout so that th ...

css

Bootstrap resource failed to load

I successfully connected the most recent version of bootstrap.min.css to my webpage using <link rel="stylesheet" href="assets/css/bootstrap.min.css">. Initially, everything was running smoothly. However, I now encountered an issue where my browser is ...

htmlcsstwitter-bootstrapbrowserlocal

Remove the pop-up using its unique identifier, element, or style class

I recently launched a free hosting site, but I'm encountering an issue where an ad for the site keeps appearing upon loading. I need to find a way to remove the specific rows that contain this ad. Specifically, I want to delete the ****BOLD**** rows, ...

javascripthtmlpopup

Close the Bootstrap modal upon clicking the "Ok" button in SweetAlert2

I need help with closing my Modal Bootstrap after clicking the Ok button in SweetAlert. I've attempted various methods, but none of them have worked so far. I'm not sure if I'm implementing it correctly, but I've utilized JQuery for thi ...

htmljquerytwitter-bootstrap

Send the value of an li element using AJAX when clicked back to the original page

I'm currently working on passing the data-value of the < li > element that I clicked on to PHP within the same page. My approach involves using AJAX to send the data to PHP for querying purposes. While it seems like the AJAX request is functioni ...

phpjqueryhtmlajaxpost

Can you place 4 table cells in the first row and 3 table cells in the second row?

Exploring the world of HTML and CSS designs for the first time. Here's a code snippet I've been working on: <html> <body> <table width="100%"> <tr> <td width="25%">&#160;</td> ...

html

Working with Facebook Graph API data using javascript

I am attempting to parse output results from the Facebook Graph API (specifically comments on a website). Below is the script I am using: if (document.getElementById('comments')) { var url = "https://graph.facebook.com/fql?q=select+xid%2C ...

javascriptjqueryhtmlparsingfacebook-graph-api

Create a full-width slider using Materialize CSS framework

When using materializecss to create a slider, I encountered an issue where the image is full width but not full height, causing scrollbars to appear. What changes can I make to ensure the slider fills out my screen without any scrollbars? Additionally, I ...

javascriptjqueryhtmlcssmaterialize

A step-by-step guide on modifying the box-shadow color using jquery

I have developed some JavaScript code that adjusts the box-shadow of buttons to be a darker version of their background color. This allows users to dynamically change the button background colors. The current code successfully changes the box shadow based ...

javascriptjquerycss

Is there a way to modify my code to eliminate the need for a script for each individual record?

Whenever I need to create a code with the ID by browsing through my records, is there a way to make just one function for all the records? $tbody .= '<script> $(document).ready(function(){ $("#img'.$idImage .'").click(functi ...

javascriptphphtml

How can I center align text after floating ul li elements to the left?

When creating a navigation bar with li elements floated left, the text also floats left. How can I center the text in the navigation bar? I have tried using text-align:center;, but it doesn't center the text on the y-axis. Some suggest using padding t ...

htmlcss

When is the appropriate time to utilize the style attribute in CSS?

Hey there, I'm in the process of building a website from scratch and I've hit a snag. I understand that using the style tag isn't ideal, but would it be acceptable in this scenario? Is there a more efficient approach? Let's consider t ...

htmlcssstylescoding-style

Tips for creating a gradual fade-out effect on a bootstrap modal window

One issue I'm facing is with my modal dialog (#busyIndicator). It simply displays a message that reads "Please Wait". Sometimes, the operation it's tied to completes so quickly that the visual transition between showing and hiding the dialog beco ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible to stack one Canvas on top of another?

Right now, I am engaged in a process that involves: creating a canvas and attaching it to a division applying a background image through CSS to that canvas. drawing a hex grid on the canvas placing PNGs on the canvas. animating those PNGs to show "movem ...

javascriptcsshtmlcanvas

Jumping transitions in thumbnail images

Could you please visit I've noticed that when hovering over the thumbnails in the last column, the images jump a bit after transition, especially in Firefox. Do you have any suggestions on how to resolve this issue? ...

htmlcssresponsive-designcss-transitions

Can @keyframes be iterated through CSS (particularly Stylus)?

Here is some Stylus code I'm working with: for i in (1..3) .l:nth-child({i}) opacity (i / 5) When executed, the output looks like this: .l:nth-child(1) { opacity: 0.2; } .l:nth-child(2) { opacity: 0.4; } .l:nth-child(3) { opacity: 0.6; } ...

cssnode.jsiterationstyluscss-animations