Ensure that the content within each column stays contained within its designated area and does not

Is there a way to prevent text in one column from overlapping with another column if it's too long?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row vdivide">
  <div class="col-lg-6 text-center">
    <div class="mt-5">
      <span id="asd" class="text-truncate">askdl kansld knalskdn laknd laksm dlams dlkams lmdak sdmlaksmd la
                        askld malsk mdalsk mldaksml dkasm ldkamsl dkamsl kdmalskmd alsm dlakm skdlams kdm
                        </span>
    </div>
  </div>
  <div class="vertical-divider"></div>
  <div class="col-lg-6 text-center">
    <div class="mt-5">
      <p class="border-bottom">
        <span class="font-weight-lighter">Sesso:</span>
        <span class="font-weight-lighter" id="sesso"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Data di nascita:</span>
        <span class="font-weight-lighter" id="dataNascita"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Regione:</span>
        <span class="font-weight-lighter" id="regione"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Città:</span>
        <span class="font-weight-lighter" id="citta"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Anzianità di lavoro:</span>
        <span class="font-weight-lighter" id="anzianita"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Disponibilità online:</span>
        <span class="font-weight-lighter" id="coachingOnline"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Email:</span>
        <span class="font-weight-lighter" id="email"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Cellulare:</span>
        <span class="font-weight-lighter" id="cellulare"></span>
      </p>
    </div>
  </div>
</div>

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

The code provided displays an image of the intended result where long text wraps like this:

askdl kansld knalskdn laknd
laksm dlams dlkams lmdak sdmlaksmd
la askld malsk mdalsk mldaksml dkasm
ldkamsl dkamsl kdmalskmd alsm dlakm
skdlams kdm

If you have any tips on how to achieve this layout, please share!

htmlcssbootstrap-4

Answer №1

Your paragraph is being forced into one line by the white-space: nowrap property in your bootstrap class text-truncate, affecting the span element "#asd".

The nowrap property collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.

To fix this issue, you can add the following CSS:

#asd {
  white-space : normal !important;
 }

Check the updated code below: 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row vdivide">
  <div class="col-lg-6 text-center">
    <div class="mt-5">
      <span id="asd" style="white-space : normal" class="text-truncate">askdl kansld knalskdn laknd laksm dlams dlkams lmdak sdmlaksmd la
         askld malsk mdalsk mldaksml dkasm ldkamsl dkamsl kdmalskmd alsm dlakm skdlams kdm
      </span>
    </div>
  </div>
  <div class="vertical-divider"></div>
  <div class="col-lg-6 text-center">
    <div class="mt-5">
      <p class="border-bottom">
        <span class="font-weight-lighter">Sesso:</span>
        <span class="font-weight-lighter" id="sesso"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Data di nascita:</span>
        <span class="font-weight-lighter" id="dataNascita"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Regione:</span>
        <span class="font-weight-lighter" id="regione"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Città:</span>
        <span class="font-weight-lighter" id="citta"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Anzianità di lavoro:</span>
        <span class="font-weight-lighter" id="anzianita"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Disponibilità online:</span>
        <span class="font-weight-lighter" id="coachingOnline"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Email:</span>
        <span class="font-weight-lighter" id="email"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Cellulare:</span>
        <span class="font-weight-lighter" id="cellulare"></span>
      </p>
    </div>
  </div>
</div>

Answer №2

If you want to break your line within a span, you can use display:block. Make sure to remove the class="text-truncate"

.asd{
display:block
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row vdivide">
  <div class="col-lg-6 text-center">
    <div class="mt-5">
      <span class="asd">askdl kansld knalskdn </span>
      <span class="asd">laknd laksm dlams dlkams lmdak sdmlaksmd la
                        </span>
      <span class="asd"> askld malsk mdalsk mldaksml dkasm ldkamsl  </span>
      <span class="asd"> dkamsl kdmalskmd alsm dlakm skdlams kdm
                        </span>
    </div>
  </div>
  <div class="vertical-divider"></div>
  <div class="col-lg-6 text-center">
    <div class="mt-5">
      <p class="border-bottom">
        <span class="font-weight-lighter">Sesso:</span>
        <span class="font-weight-lighter" id="sesso"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Data di nascita:</span>
        <span class="font-weight-lighter" id="dataNascita"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Regione:</span>
        <span class="font-weight-lighter" id="regione"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Città:</span>
        <span class="font-weight-lighter" id="citta"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Anzianità di lavoro:</span>
        <span class="font-weight-lighter" id="anzianita"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Disponibilità online:</span>
        <span class="font-weight-lighter" id="coachingOnline"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Email:</span>
        <span class="font-weight-lighter" id="email"></span>
      </p>
      <p class="border-bottom">
        <span class="font-weight-normal">Cellulare:</span>
        <span class="font-weight-lighter" id="cellulare"></span>
      </p>
    </div>
  </div>
</div>

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

HTML Bootstrap - Organizing Labels and Checkboxes in a Grid Layout

I've been attempting to achieve a specific design using bootstrap and html, but I've hit a roadblock. No matter what I try, the design doesn't seem to work. Here's the code I've been working with. Can you please offer some guidance ...

htmlcssangularbootstrap-4

Tomcat: jamming out to some tunes

My web application includes a feature to play audio files uploaded to the server. I'm using the following code for this: <object id="MediaPlayer" type="application/x-oleobject" height="42" standby="Installing Windows Media Player..." width="138" a ...

htmltomcataudio

Tips for accurately aligning a relative p tag within a td

Description: I am trying to prevent text overflow in a table cell and position the text underneath a header without wrapping it under an image. I have tried setting a static width for the image and adjusting the left property, but it is not working as expe ...

htmlcsshtml-tableposition

What specific element is being targeted when a directive injects a ViewContainerRef?

What specific element is associated with a ViewContainerRef when injected into a directive? Take this scenario, where we have the following template: template `<div><span vcdirective></span></div>` Now, if the constructor for the ...

htmlangulartypescript

Align a series of items in the center while also ensuring they are left-justified

Issue Description : I am facing a problem with centering inline-block elements. When the elements exceed the width of a single line, Action Required : I want them to be justified to the left. I have tried using flex boxes and other methods, but I can ...

htmlcsslayout

Modify/Adjust/Move the image uploaded by the user in VueJS before transferring it to an aws s3 bucket

Can you resize images in vuejs using vanilla js? I've managed to upload an image and send it to my s3 bucket using vue, but I'm struggling to figure out how to transform an image within vuejs and display it. Document.querySelector doesn't se ...

javascripthtmlcssvue.js

Strategies for resolving minor validation challenges (Almost complete, just a few finishing touches needed ...)

This question was originally posted in Spanish on es.stackoverflow.com by Julian Dumitrel: I had planned to make a record, step by step, where I had 3 different steps all within one <form>. After finishing my form validator successfully, I encounte ...

javascriptjqueryhtmlformsvalidation

Using JQuery to create animations with fadeIn and fadeOut effects is a great way to

As a complete newbie taking my first steps in front-end development, I spent most of my day trying to work out an animation function but couldn't quite get it right. Below are the snippets of HTML, CSS, and JavaScript codes: <!DOCTYPE html> < ...

javascriptjqueryhtmlcssanimation

Layering digital sheets of paper and rearranging them with the help of CSS

I want to create a visual representation of a stack of paper sheets as a metaphor. The idea is to neatly stack the sheets on top of each other, with only the header of each sheet visible and the rest of the content covered. !-------------- | Sheet 1 +--- ...

jquerycss

What is the reason for the initial display of an empty option when using AngularJS to select an

Every time I refresh the page, the initial option is blank. How can I set Any Make as the default selection? Below is the code snippet from my view: <select class="form-control" id="make" name="make" ng-init="Any Make" ng-model="makeSelected" ng-chan ...

javascripthtmlangularjshtml-select

What is causing the extra space in Flexbox layout?

Currently, I am in the process of coding a layout that requires me to evenly distribute cards next to each other in rows using flex. However, I am encountering an issue with spacing on the right side and I cannot pinpoint the exact reason behind it. After ...

htmlcssbootstrap-4

Merging a generator of unpredictable quotes with a simulated typewriter effect

Recently, I've been experimenting with a project involving a random quote generator and wanted to add a typewriter-style animation when the generator displays a new quote. The challenge is that my knowledge of JavaScript is quite limited, making it di ...

javascripthtmljquery

Froala text area is unexpectedly visible when I attempt to cover it with a partially see-through mask

The website I'm currently developing features a semi-transparent overlay that dims the screen with a light-colored message displayed on top. This overlay and message are shown whenever there is a background process running. Everything was running smoo ...

javascriptcssangularjsfroala

Assistance needed! Issue with the functionality of the survey modal text inclusion

Currently working on this page: The red bar is supposed to trigger a modal window with the survey inside. However, I am encountering an error in my .TXT file. <!--CSS--> There is additional code that I can't display due to restrictions from t ...

javascriptasp.nethtmlcsscolorbox

Clickable <tr> element causing hindrance to Bootstrap 4 modal popup button function

Check out my new GUI design for a basic inventory management app: https://i.sstatic.net/gOKVJ.png The issue I'm facing is with the <tr> element's @Url.Action(...), which is causing the delete button to not trigger the bootstrap modal. Ins ...

c#asp.net-mvc-4bootstrap-4razor-2

Is there a single function that can handle multiple sliders sharing identical options?

Currently, I am utilizing jQuery UI to generate 6 sliders with identical options for a survey. I am curious if there exists a method to merge all these sliders into one function while maintaining the ability to operate them individually? If such a soluti ...

jqueryhtmlcssjquery-ui

Automatically adjust divs to fill available space

I've been grappling with a challenge involving my divs - how to translate my design seamlessly into the actual layout. Thus far, research and implementation have not yielded the desired results. In the link provided, you'll notice //PORTFOLIO fol ...

csshtmlwidthspace

What prevents Django websites from being embedded within another HTML (iframe)?

I attempted to include a Django form within another HTML page, but it's not functioning correctly. I've tried on several of my other Django sites with no success. I even tested it on other websites as well. Is there a restriction on using Django ...

pythonhtmldjangoiframe

What is the best way to align anchor text in the center with images?

I'm trying to align my images and anchor text in a horizontal row that is centered with the form. The images and anchor text should also be aligned with each other and with the surrounding text. Take a look at the complete page: https://i.sstatic.net ...

htmlcss

Sass fails to import the theme for the angular material checkbox

I'm facing an issue where, despite specifying imports in my SCSS file and setting up a custom theme, the checkbox styles are not visible except for those related to typography. This is what my SCSS file looks like: @import "~bootstrap/scss/bootstrap ...

cssangularsassangular-material