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

The headline box is displaying CSS code instead of the content. How can this issue be resolved?

Having an issue with a WordPress template that features a blue "headline" box that I need to change the color of to #333399. I tried inspecting the element, browsing through the code, and identified the code below as what needed modification: #headline, # ...

csswordpress

Could someone please advise me on how to prevent the second animation from being overridden?

After attempting to separate the animations with a comma and placing them on the same transform, I am still encountering issues. * { margin: 0px; padding: 0px; box-sizing: border-box; } html, body { width: 100%; height: 100%; } .container { ...

htmlcssanimationcss-animationskeyframe

Is AJAX malfunctioning while the success function is functioning properly?

the function for success is operational, however the data isn't being saved in the database $(document).ready(function() { $("#ChatText").keyup(function(e){ if(e.keyCode == 13) { var ChatText = $("#ChatText").val(); ...

phphtmlajax

What is the maximum character limit for the JQuery validation plugin?

Currently, I am utilizing the JQuery validation plugin in my project. My goal is to set a maxlength for one of the fields. Here's an example of how it can be done by defining rules externally: rules: { Message: { required: false, maxLe ...

javascriptjqueryhtmljquery-validate

Tips on how to hold off the display of webpage content until all elements, including scripts and styles, have fully loaded

I have a variety of div elements set up like this - <div id='1' class='divs_nav'>My Dynamic Content</div> <div id='2' class='divs_nav'>My Dynamic Content</div> ... <div id='149' c ...

javascriptjqueryhtml

Tips for hiding the overflow scrollbar on Microsoft Chrome when there is no content to scroll

Looking for a solution to hide scroll bars in Microsoft Chrome, but only when there is no content to scroll? The current div and styles always show the horizontal and vertical scroll bars, even when the height exceeds the content. <div style="backgroun ...

javascripthtmlcss

Incorporating JavaScript/jQuery into Razor: A Comprehensive Guide

In one of the views in my ASP.NET MVC4 application, I have created an input field and a button. My goal is to pass the value entered in the input field as a parameter to a controller when the button is clicked. The issue I'm facing is that while I can ...

jqueryasp.nethtmlasp.net-mvc-4razor

The height property in the CSS is causing the parent element to break and cannot be confined

Here is the HTML code that I am currently working with: <div id="div1"> <p id = "a"> <! -- content --> </p> <p id='b'> <! -- content --> </p> </div> Additionally, th ...

cssheight

How can CSS files be shared among multiple projects within Visual Studio 2012?

I am working on a Visual Studio Project Solution that includes 3 separate projects. To streamline the process and avoid duplication, I aim to have a shared CSS file for all 3 projects since they all follow the same CSS rules. Despite trying the Add As Lin ...

c#cssvisual-studio-2010

Adjust the width of xAxis[0] and xAxis[1] in Highcharts to their default values

Hi there, I need some help with Highcharts. Is it possible to adjust the width of xAxis[0] and xAxis[1] as well as reset the offset of xAxis[1] at runtime? I have a chart with two x-axes that need to be resized to fit different sized divs. You can see an ...

javascriptcsshighcharts

Eliminate any undefined data in the popup map of Javascript

I am working with JSON data that is being displayed in a pop-up on a map. In cases where there is missing data (Visibility), the word undefined appears in the pop-up. Is there a way to remove the undefined text so that it does not show up in the pop-up? ...

javascripthtmlcssjson

Tips for recalling the display and concealment of a div element using cookies

My HTML code looks like this: <div id='mainleft-content'>content is visible</div> <div id="expand-hidden">Button Expand +</div> To show/hide the divs, I am using JQuery as shown below: $(document).ready(function () { ...

javascriptjqueryhtmlcsscookies

What is the best way to design a content page with linked boxes to various arrays in PHP?

How can I create a PHP menu template that navigates to different pages? I am new to PHP and still learning. I want to achieve something similar to this image: https://i.stack.imgur.com/ylfe8.jpg I have the code for the navigation bar, but I need help crea ...

phpcsshtmlnav

Div with fixed positioning experiencing glitching until reaching a specific height

I've been struggling to resolve an issue with a script that is supposed to scroll down with the page and stop at a specific height. However, right before it reaches the desired point, it temporarily disappears and then reappears. For reference, here& ...

jqueryhtmlcssscrollposition

Solving layout issues / Techniques for determining element heights

This new question is in relation to my previous one: How to position relative elements after absolute elements I have updated the JsFiddle from that question to better represent my current HTML, which I unfortunately do not have a URL for at the moment. Y ...

javascripthtmlcss

Opening multiple dialogs in Jquery Dialog box

I have several images displayed on a single page. When each image is clicked, I want a dialog box to open. I currently have 6 instances of this setup in my HTML. However, when I click on an image, all 6 dialogs pop up with the same information as the first ...

javascriptjqueryhtml

Using HTML, CSS, and JavaScript, the main tab must include nested subtabs to enhance navigation and

When a user clicks on a tab, another tab should open within the main tab. Depending on the selection in the second tab, input fields should appear while others hide. Something similar to the nested tabs on expedia.com. I have experimented with the tab vie ...

javascripthtmlcss

Changing Ionic Column Widths Based on Content Length

In my dynamic ionic 2 grid system, I am facing a layout issue. <div> <ion-row> <ion-col > ; <ion-card-header class="card-header"> {{hunt.title}} </ion-card-header> </ion-col> <ion-col *ngIf="!hunt. ...

htmlcssangularionic-framework

Issues with jQuery toggle functionality have been reported specifically on the iPhone8 and other iOS devices

Hi everyone, I'm facing an issue with the header on my website. It displays a hamburger menu on small screens, and while it works perfectly on PCs and Android phones, it's unresponsive on iOS, specifically on my iPhone 8. I've tried using va ...

jqueryhtmlcsstoggleresponsive

I don't understand why my BeautifulSoup code is throwing an attribute error even though the variable it's referring to is assigned a value

Currently, I am working with Python 3.9.1 along with selenium and BeautifulSoup to develop my first web scraper targeting Tesco's website. This is essentially a mini project that serves the purpose of helping me learn. However, upon running the code p ...

pythonhtmlseleniumbeautifulsoupattributeerror