Tips for inserting manual line breaks in justified text

My task involves taking a 5-page story from a Word document and implementing it on a website.

#reading {
  hyphens: auto;
  text-align: justify
}
<div style="font-size: 20px; width: 750px; margin-bottom: 4em;" class="reading" id="reading">
  TextTextText<br> TextTextText
  <br> TextTextText
</div>

Requirements for the text:

  • The line breaks should match those in the Word document exactly
  • All lines should be justified
  • I am unable to use span elements due to a script that processes the text

Issue:

  • Line breaks and text-align: justify are not functioning together as expected

I experimented with adjusting the div width to mimic that of the Word document. Initially, the line breaks were correct, but after the first 20 lines, they began to shift slightly.

Query:

Is there a method to manually create line breaks while maintaining text-align: justify?

htmlcss

Answer №1

One way to align text in CSS is by using the text-align-last: justify property.

It's important to keep in mind that if there are only a few words on the last line, the outcome might not be as expected: a word displayed on the left side and another one on the right with a large space in between.

For a more visually pleasing result, consider using align-text-last: center.

Check out this simulation tool for the Text-align-last property to see it in action.

Answer №2

If the use of <br> is not possible due to the presence of text-align: justify, then additional elements must be added: .

<span> elements cannot be used, but paragraphs <p> can be utilized.

One approach would be to wrap the text into multiple paragraphs <p> and apply the margin css property:

.par-just {
    text-align: justify;
    margin: 0;
    text-indent: 30px;
}
<div style="font-size: 20px; width: 750px; margin-bottom: 4em;" class="reading" id="reading">
    <p class="par-just">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </p>

    <p class="par-just">
        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
    </p>
</div>

However, if margin: 0 is set, there will be no margin between paragraphs. To add a small margin, using a negative value like margin-bottom: -10px; can help.

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 you make each <li> in an HTML list have a unique color?

Looking for a way to assign different colors to each <li> element in HTML? <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <ul> Here's how you want them displayed: Item 1 should be red Ite ...

javascripthtmlasp.net

Exploring Angular2's interaction with HTML5 local storage

Currently, I am following a tutorial on authentication in Angular2 which can be found at the following link: https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492 I have encountered an issue with the code snippet below: import localSt ...

javascripthtmlangulartypescriptlocal-storage

Create dynamic flex transitions

After searching through various CSS resources and websites, I haven't found an answer to my specific query. I have been exploring CSS tricks as well as http://n12v.com/css-transition-to-from-auto/ but still uncertain if what I'm looking to achiev ...

htmlcssflexboxcss-transitions

The bubble dialogue box in my picture

Looking to create a panel with images that, when clicked on, display an info window similar to Google Map's pin maker. When you click on an image, a balloon should appear containing additional information. Check out this example <a id="infowindow ...

jquerycsszurb-foundation

Passing a variable using a button's value attribute in jQuery

My goal is to develop a form in my application where users can input their name and address. Once the user enters the information, I need to validate it and add it to an array before submitting it to the PHP function. Additionally, I want to provide users ...

jqueryhtmlbutton

CSS - Issue with aligning image captions

I created an HTML snippet that has the following structure: <div class="large-4 columns"> <div class="promo-box"> <a href="#"> <img src="/our-projec ...

htmlcss

Utilize Bootstrap v4 in styling and aligning buttons for a polished

With Bootstrap v4 dropping the .btn-group-justified class, a solution can be found at https://github.com/twbs/bootstrap/issues/17631 Here's how to justify the buttons: <div class="btn-group btn-group-justified" role="group" aria-label="Justified ...

cssbootstrap-4twitter-bootstrap-4

How to add icons to HTML select options using Angular

Looking for a way to enhance my component that displays a list of accounts with not only the account number, but also the currency represented by an icon or image of a country flag. Here is my current component setup: <select name="drpAccounts" class= ...

htmlcssangulartypescript

Does the media query max-width refer to the size of the viewport or the size of the window?

Can someone clarify whether the max-width in a media query is based on the viewport size or window size? For instance, consider this media query: @media screen and (max-width: 360px){} Would this media query be activated when the viewport reaches 360px ...

cssmedia-queriesviewport

Display an HTML image within a span tag and ensure it is aligned to the bottom

I am facing a layout issue with 2 images that are placed side by side within their tag . The sizes of the images are different, but they are both anchored at the top of their parent element. <span style="position: relative; left: 0; top: 0; vertical- ...

htmlcssangularalignment

Incorporating HTML snippets into files using PHP

When attempting to insert an HTML line into the "userlist.php" file using PHP code, I encountered an issue: <?php $username = "pajlok"; $type = ".jpg"; $html = <<<EOD <div onclick="window.location.href = 'user/pajlok/'" styl ...

phphtmlfile

Modifying selections within a select box generated dynamically using JQuery

Looking for help on how to delegate to a static DOM element in my current situation. I need to create a dynamic select box .userDrop when .addNew is clicked, and then have the user select an option from #secDrop, triggering a change event that calls the da ...

javascriptjqueryhtmldom

When viewed on a mobile device, the page defaults to displaying the NumPad instead of the Text Keyboard in Angular

The email field in my angular app is opening a Key Pad in mobile view and I'm not sure why. <form (ngSubmit)="onSubmit()" #emailForm="ngForm"> <div class="emailaddress" style="text-align:center;" *ngIf="!showEmail"& ...

htmlcssangular

Discover how to access the translations of a specific key in a chosen language by utilizing the angular $translate functionality

How can I retrieve a specific language translation using angular's $translate function within a controller? The $translate.instant(KEY) method returns the translation of the specified key based on the currently selected language. What I am looking for ...

htmlangularjslocalizationtranslation

Trouble with Styling React-Toastify in TypeScript: struggling to adjust z-index in Toast Container

Currently in the process of developing a React application utilizing TypeScript, I have incorporated the React-Toastify library to handle notifications. However, encountering some challenges with the styling of the ToastContainer component. Specifically, ...

cssreactjstypescriptreact-toastify

There seems to be a white space problem located beneath the header photo and the initial

I'm a beginner at coding and working on this project for fun. I'm almost done, but I can't get rid of a white space that's dividing my header from the first section. See the screenshot below: https://i.stack.imgur.com/a1flt.png Even af ...

htmlcss

A guide to eliminating missing tags from HTML code using Asp.net

There have been instances where the HTML code we receive from certain websites does not have proper tag endings, causing issues with our UI. For example: <br /><p>hello the para start here </p> <p>some text and no ending tag As yo ...

c#htmlasp.netregex

Tips for submitting a form remotely using Radix Alert Dialog and the form attribute

Currently, I have integrated a Radix UI's Alert Dialog in my Next.js 13 app to confirm the deletion of a contact from the user's contact list: Take a look at the Alert Dialog modal here However, there seems to be an issue with the delete button ...

cssreactjsnext.jsradix-ui

What is the best way to ensure that the CSS padding for a button matches the width of the column consistently?

I have encountered an issue where I am unable to maintain consistent padding for a button relative to the column width. This is crucial for me because the button's background changes when a user hovers over it. However, using a fixed value for the but ...

htmlcsswebpadding

Upload several files sequentially in a form on a website using Selenium with Python

I need to automate the process of inputting multiple files from a folder into a website and running an online job for each file. Currently, I can only input one file at a time using this code snippet. from selenium import webdriver url = "http://www.exam ...

pythonhtmlseleniumfile-uploadinput