Text that spans across multiple lines

Question

Text that spans across multiple lines

I have a multi-line text that I need to adapt to a div. For example:

https://i.stack.imgur.com/mtZmf.png

Is there a way to adjust the text within the div? Can we prevent the blue spacing after the word "text" using CSS?

If I have various texts of different lengths, is there a method to make this adjustment more universal?

.box {
  border: 1px solid red;
  width: 200px;
  position: relative;
  padding-top: 40px;
}

.label {
  position: absolute;
  top: -10px;
  background-color: blue;
}

<h1>My First Heading</h1>

<div class="box">
  I'm a box.
  <div class="label">
    I'm a label without a text wrapped.
  </div>
</div>

html css

Answer 1

Answer №1

To prevent adding extra space after text and properly align it to both sides, you can utilize the text-align CSS property.

https://codepen.io/cursorrux/pen/BaZYZLN

.box {
  border: 1px solid red;
  width: 200px;
  position: relative;
  padding-top: 40px;
}
.label {
  position: absolute;
  top: -10px;
  background-color: blue;
  text-align: justify;
}

<h1>My First Heading</h1>

<div class="box">
    I'm a box.
    <div class="label">
        I'm a label without any wrapped text.
    </div>
</div>

Answer 2

To prevent adding extra space after text and properly align it to both sides, you can utilize the text-align CSS property.

https://codepen.io/cursorrux/pen/BaZYZLN

.box {
  border: 1px solid red;
  width: 200px;
  position: relative;
  padding-top: 40px;
}
.label {
  position: absolute;
  top: -10px;
  background-color: blue;
  text-align: justify;
}

<h1>My First Heading</h1>

<div class="box">
    I'm a box.
    <div class="label">
        I'm a label without any wrapped text.
    </div>
</div>

Answer 3

Answer №2

One possible solution is to implement a

margin-right: <unit of measument>;

to eliminate the extra blue space, but keep in mind that this method may not be optimal for responsiveness if the box's size is subject to change.

Answer 4

One possible solution is to implement a

margin-right: <unit of measument>;

to eliminate the extra blue space, but keep in mind that this method may not be optimal for responsiveness if the box's size is subject to change.

Text that spans across multiple lines

Answer №1

Answer №2

Similar questions

Creating an interactive Table of Contents in Sharepoint using only JavaScript

Establishing a Connection with Node/Express Routing via JavaScript

1 in every 3 divs in jQuery, chosen randomly

The font styles shift and vertical bars vanish when placed under images

Iterating through children of the target element using the .each() method in jQuery

What is the most strategic way to conceal this overlay element?

The alignment of inline divs is off and they are not forming a straight row

Once the database fetches and displays 500 results, the HTML/CSS formatting begins to

I keep encountering an issue with getJson

What is the best way to update the content of a modal using jQuery and AJAX?

Ensuring Input Integrity: Utilizing HTML and Javascript to Block Unfilled Form Submissions

What is the best way to customize bootstrap styles?

Attempting to insert a line break tag within the text using React

With a simple click of a button, I aim to have the ability to set a variable to true

Comparing GET and POST actions in mod_rewrite search form

Attributes required are not functional on mobile devices

What is the best way to have text wrap around an icon in my React application?

Arrange CSS to distribute list items across two rows with an unlimited number of items

Is JSDOM able to handle media queries?

Delivering HTML Email