When text refuses to wrap, it ends up disrupting the layout

In my collection of div rows with variable width inside a resizable container, I'm encountering an issue with a hanging indent. The problem arises when the width is too low, causing the first line to be pushed beneath the red label.

At 450px, everything displays correctly in .wrapper, but at 250px you can see the layout breaking. My goal is to always keep the longtextthatwraps span on the same line as the red label.

Check out this live example/fiddle and take a look at the source below:

HMTL (note: there is no whitespace between .prefix and .part for readability...):

<div class="wrapper">
  <div class="padded excludes">
    <div class="parts first">
      <span class="prefix">Quisques:&nbsp;</span>
      <span class="segment level-0">
        <span class="part text">longtextthatwraps incorrectly (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts">
      <span class="segment level-0">
        <span class="part text">consectetur adipiscing  (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-0">
        <span class="part text">quisque non mauris sed:</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-1">
        <span class="part list-item">hendrerit (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-1">
        <span class="part list-item">non mauris sed (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
    <div class="parts"> 
      <span class="segment level-1">
        <span class="part list-item">lorem ipsum dolor (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      </span>
    </div>
  </div>
</div>

CSS:

.wrapper {
    width: 250px;
    background: #c3dff5;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}
.padded {
    padding-left: 20px;
}
.parts {
    padding-left: 80px;
}
.parts.first {
    padding-left: 0;
}
.prefix {
    color: #D12;
    font-weight: bold;
    min-width: 80px;
    display: inline-block;
}
.level-0,.level-1 {
    display: inline-block;
    padding-left: 5px;
    text-indent: -5px;
    outline: 1px dotted #f0f;
}
.level-1 {
    padding-left: 20px;
}

Your help would be greatly appreciated. Thank you!

htmlcss

Answer №1

It appears that I have a potential CSS solution for your issue, although there may be alternate methods available to achieve the desired outcome.

Within the .prefix class, I applied the following style:

.prefix {
    display: table-cell;
}

I also included another definition:

.parts.first .level-0 {
    display:table-cell;
}

Hopefully, this meets your requirements! You can view the resulting changes in the updated JSFiddle. If this doesn't align with your goals, feel free to inform me so I can assist you further!

Answer №2

Consider removing the first class, moving the span.prefix outside of div.parts, and adding a position: absolute to it.

Check out the JsFiddle here!

Update (CSS Only)

If you're looking for a CSS-only solution, try removing the first class, giving a position: absolute to span.prefix, and specifying a left position like left: 25px. This modification appears to also work in IE7.

Here's the updated JsFiddle link!

Answer №3

To achieve the desired layout, you can utilize the CSS properties position:absolute; and margin-left.

.first > .prefix{
  position: absolute;
  left:10px;
}

.first > .level-0{
  margin-left:80px;
}

You can find a working example in lines 17-24 of this JSFiddle demo

Answer №4

I devised a streamlined version that will float each section, one to the right and one to the left, assigning them percentage units. Don't forget to adjust your indentation levels.

<div class="wrapper">
    <div class="left">
       <span class="red">Lorem: </span>
    </div>

    <div class="right">
      <span class="level">ipsum dolor sit  (<a href="#" class="code">0000</a>-<a href="#" class="code">0000</a>)</span>
      <span class="level">amet consectetur adipiscing:</span>
      <span class="level">ipsum dolor sit (0000-0000)</span>
  </div>

</div>

CSS

 .wrapper {
  width: 250px;  
  background: #C3DFF5;
  overflow: hidden;
  padding: 12px;
}

.red {
  color: red;
  font-weight: bold;  
}

.left {
  float: left;
  width: 30%;
}

.right {
  float: right;
  width: 70%;
}

.level {
  display: block;
  outline: 1px dotted #FF00FF;
}

View the live demo here

Answer №5

Check out this example

To style it, you need to include the following CSS:

.container {
    width: 100%;
    background: #f2f2f2;
    font-family: Arial, sans-serif;
    font-size: 16px;
    min-width: 300px;
    float: left;
}

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

Trouble with HTML Contact Page Email Delivery

Hello there, I recently set up a contact page for my html website but unfortunately, it's not sending the messages to my email as expected! You can see what I mean in this screenshot -> https://i.stack.imgur.com/2xPXw.png I'm a bit puzzled b ...

javascriptphphtml

In Bootstrap 4, the vertical group of buttons is aligned to the bottom

I am trying to align a group of buttons at the bottom, centered horizontally and aligned vertically. Currently, this is how it looks: <div class="row"> <div class="col-md-4"> <div class="center-block"> <div cla ...

cssangularbuttonbootstrap-4ng-bootstrap

In ReactJS with Bootswatch, the font styles are not applied

I have experimented with various methods to apply this font, but it is still not functioning correctly. @font-face { font-family: 'Samim'; src: local('Samim'), url(./resources/fonts/Samim.ttf) format('truetype'); fon ...

cssreactjsfontsbootswatch

I cannot seem to alter the background color of my image through the use of external CSS

body { background-color: #f6f7d4; } h1, h3, hr { color: #68b8ab; } hr { width: 100px; border-style: dotted none none; border-color: gray; border-width: 5px; } img { background-color: black; } Although the external CSS code a ...

htmlcss

Tips for adjusting the size of numbers (e.g. 0, 1,4..) using CSS

I have a paragraph on my website that contains a phone number and an email address within the header section. I have styled them to be the same font-size: small, but for some reason, the phone number appears slightly larger than the email address when view ...

htmlcss

Looking to utilize Python Selenium for downloading a PDF file

I am currently working on automating the process of downloading PDFs using Selenium Webdriver in Python An issue I've encountered is that the download button is hidden within an embed tag in the HTML code <embed width="100%" height="100%" name="p ...

javascriptpythonhtmlseleniumpdf

Keeping the Bootstrap popover anchored to the content

I have a functional bootstrap popover that includes a time attribute. However, I am looking to enhance its functionality so that it remains open when the mouse is on the content and closes only when the mouse leaves the content. Here is the relevant code ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using JQuery to hide elements by setting CSS display as none instead of block

Is there a way to change the display of a content div to block when a specific tab is selected by the user, while hiding all other content divs? Here is the JQuery code I have tried so far: $(document).ready(function() { function resetTabs() { $("# ...

javascriptjqueryhtmlcss

Can a function be embedded within a React render method that includes a conditional statement to update the state using setState()?

My application randomly selects three values from an array found within defaultProps and then displays these values inside div elements in the return JSX. It also assigns these values to properties in the state object. I am facing a challenge where I need ...

javascripthtmlreactjsjsx

Issue with Bootstrap carousel control not switching back to the previous slide

Interestingly, the carousel is functioning for sliding to the next slide but not for going back to the previous one. I'm still getting the hang of jsfiddle, as you can see, highlighting works for the next slide but not for the previous. Check out the ...

jqueryhtmltwitter-bootstrap

Is it possible to extract the CSS path of a web element using Selenium and Python?

I am working with a collection of elements using find_elements_by_css_selector, and my next task is to extract their css locators. I attempted the following approach: foo.get_property('css_selector') However, it seems to be returning None. ...

pythoncssseleniumselenium-webdriverwebdriver

What is the best way to create a scroll bar within a table while ensuring that the rows expand to fill the entire width?

I am attempting to design a table with 4 columns and a minimum of 12 rows while utilizing overflow-y:scroll. The webpage is completely responsive. I understand that in order to incorporate a scrollbar into the table, I must specify display: block for both ...

htmlcssscrollbar

Turning off FavIcon.ico Can Enhance Performance

element: Currently, I have two websites being hosted on AEM or cq5 with distinct domains. Both websites share the same favicon on the new domain. I have attempted to remove this in the head.jsp template, but the favicon continues to display. Despite remo ...

htmljspaemfavicon

Troubleshooting Paths with Angular's NgFor Directive

Within my Angular project, I have implemented a basic ngFor loop to display logo images. Here is a snippet of the code: <div *ngFor="let item of list" class="logo-wrapper"> <div class="customer-logo"> & ...

htmlangulartypescript

Display a pleasant alert message when the file is not recognized as an image during the loading

Is there someone who can assist me? I have attempted multiple times but without success. How can I display a sweet alert when a file is selected that is not an image? <input type ="file" /> ...

javascripthtml

Submit Button Field - HTML ButtonFor

Being relatively new to MVC Razor and web development, both front-end and back-end, I'm in need of a button that can send a stored value to the controller/model. I attempted to mimic the functionality of Html.TextBoxFor by giving it attributes similar ...

javascriptc#jqueryhtmlrazor

The efficiency of a website that handles numerous files

I'm currently in the process of creating a website that allows users to order a customizable product. The ordering process involves 10 steps, each with various options to choose from. Right now, all the steps are handled in a single file (index.php) ...

phpjqueryhtmlajax

Creating a dynamic list filter using JavaScript and three select boxes

Looking for a way to implement a similar feature to the one on this webpage: I will be showcasing a list of brands on the page, with each brand requiring three pieces of information: Starting letter Store (multiple options) Category (multiple options) ...

phpjavascripthtmlwordpress

Unlock the Secrets of Soundcloud: Practical Steps to Implementing the Soundcloud API in Real Life

I attempted to publish the exact .html and .js codes on the internet and host them on my own server. I am aiming to duplicate this particular example: You can check out my code at www[dot]whatsgucci[dot]com/cloudstalk.html Here is the code I utilized: ...

javascripthtmlcsssoundcloud

What is the method of posting to PHP using JavaScript without utilizing Ajax?

My current code involves a drag and drop file uploader to PHP using ajax, but it seems that my web host does not support ajax. Is there an alternative method to achieve this without using ajax? Specifically, I am facing issues with the UploadFile functio ...

phpjavascriptajaxhtml