Eliminate unnecessary spacing between words in HTML and CSS

Currently, I am working on a project using HTML and CSS with the text-align: justify property. However, I have encountered an issue where there is a significant gap between words on the second line of the text below. Everything else seems to be working perfectly fine.

<p style="text-align: justify;">Lorem Ipsum is simply dummy text of the <a href="http://example.com"> example </a>and Lorem Ipsum is simply dummy text of the lorem. I'm also printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic </p>

On the second line of this text, there are several extra spaces between each word. How can I go about fixing this issue? The desired format should look like:

    Lorem Ipsum is simply dummy text of the Lorem Lorem Lorem Lorem Lorem 
    text   of    the   lorem.   I'm   also   printing   and    typesetting     industry.
    Lorem Ipsum has been

Any advice would be greatly appreciated.

htmlcss

Answer №1

text-align: justify; ensures that a line is evenly spaced so there are no gaps at the end. This may require adding extra spaces in between words.

If you prefer to avoid this spacing, then simply don't use text-align: justify;, or let us know your preferred alignment. Maybe you'd rather use text-align: left?

:)

Answer №2

<html>
<head>
<style>
p.b { 
  letter-spacing: -3px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<p class="b">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</body>
</html>

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

Checking the alignment of a label or element in the center of a webpage using javascript

I am new to JavaScript and was attempting to determine if an element is centered aligned by accessing its CSS properties/values. Can someone help me retrieve the CSS property to verify text alignment using JavaScript? ...

javascriptcsscoded-ui-tests

Having difficulty triggering the onchange event for a combo box programmatically in IE using JavaScript

I need to dynamically trigger the onchange function when the user changes the value of another combo box. Here's my code: HTML <select name="vbitratecontrol0" id="combo1" onchange="set()"> <option value="0">None</option> ...

javascripthtmlonchange

Modify the appearance of a card upon radio button selection

Can someone help me figure out how to change the background color of my card element when a radio button is selected? <div class="col-6 col-md-3 mt-4 text-center my-auto"> <label for="'.$abreviation.'"> ...

javascripthtmljquerycssbootstrap-5

Using JavaScript to retrieve data from a JSON file and showcase it on a jQuery mobile webpage

I am struggling to retrieve JSON data from a PHP URL using JavaScript and display it within a JQuery mobile "li" tag as a category list. Despite spending the last 8 hours on it, I can't seem to get it working using the code provided below. Any help wo ...

javascriptphpjqueryhtmljson

How to execute a JavaScript function within a Jinja for loop

I am currently working on an HTML page where the variable schedule contains a series of sequential decimal numbers representing seconds. My goal is to develop a function in JavaScript/jQuery that can convert these decimal numbers into time format. However ...

javascripthtmljinja2

Whenever I hit the refresh button, the webpage fails to load. This issue seems to be related to the combination

Whenever I try to reload the page by pressing F5, it doesn't actually refresh. I am currently working with Node.js, Express Js, and AngularJS. index.html <!-- Your HTML code goes here --> </body> </html> indexController.j ...

htmlangularjsnode.jsexpress

I am having difficulty retrieving all the cssRules for certain pages

Attempting to retrieve all CSS rules using JavaScript has yielded varying results. For instance, on StackOverflow, the code used is: console.log( document.styleSheets[1].href,'rules', document.styleSheets[1].cssRules,'Should be css rules, ...

javascriptcss

I am having trouble modifying the content of a div using Jquery append

I have a plan to use jQuery to change images. I have multiple image files named choose 01.png, choose 02.png, and so on. When an image is clicked, I want it to be replaced with the corresponding choose 01.png file. Once 5 images have been clicked and chang ...

javascripthtmljquerycss

Is there a way to retrieve the sub-child menu data from a JSON file?

I am currently working on creating a horizontal menu from a json file. However, I am facing issues in retrieving the subchild elements properly. Below is an example of my json file: var data = [{ "menu":[ { "MenuId":1, ...

javascriptjquerycssjsonmenu

Tips for creating two HTML buttons to switch between images

I have a pair of robot images, one displaying the front and the other displaying the back. I am looking for HTML or CSS code to switch between the two images by clicking on them, without using JavaScript or jQuery. I came across a helpful tutorial on this ...

htmlcsswordpress

Loop through an array of buttons using an event listener

My HTML and Javascript code currently have the functionality to show/hide a row of 3 images upon button click. However, I need this feature to work for two additional rows similar to this one. I believe it involves looping through an array of buttons, but ...

javascripthtmlarraysevent-listener

What could be causing my image to not completely fill the background?

I'm struggling to get my background image to fit 100% screen width and height. Unfortunately, the image isn't showing up at all. Can anyone tell me what I'm doing wrong? Below is the code I've tried, but for some reason, it's not ...

htmlcss

The Sticky Navigation Bar Disappears After a Certain Scroll Point

Looking for some help with my website's navbar - it works fine until I scroll past the blue section, then it disappears along with other elements. Any suggestions on how to fix this? Thanks! <!DOCTYPE html> <html lang="en"> <h ...

htmlcssnavsticky

Numerous Selection Boxes

I came across this code snippet on the web. How can I insert the output into an email? Usually, I follow this format: $name = $_POST['name']; $email_body = "$name"; I want to incorporate the output of this code into my $email_body variable. Is ...

phphtmlformsemailcheckbox

What's the best way to update the value of an angular field upon submission?

Could someone please provide instructions on how to update the myName variable when the "submit" button is pressed? Thank you! app.js: app.controller('SomeController', ['$scope', 'emails', function($scope, emails) { emails ...

javascripthtmlangularjsangularjs-scope

Unexpected date format displayed by the flat picker calendar

The expected date format is "DD-MM-YYYY" but the shown date format in the UI is "YYYY-MM-DD". Click here to view the UI image Initially, before opening the date picker, the date is displayed in the expected format as "DD-MM-YYYY". Upon opening the date p ...

htmltypescriptflatpickrangular-slickgrid

Can someone please explain to me why the Transition effect is not functioning properly for input:checked::before?

Can someone please help me troubleshoot why the transition effect on the input's before element is not working when checked? If I can't solve this issue, I might have to consider alternative solutions. input[type="checkbox"]{ width: 160px ...

htmlcssinputchecked

What causes a nested span within a div to not adhere to the line-height rule of the div?

I'm encountering an issue where a div with a font size and line height set to 88 is containing text that extends beyond the specified height. Why is this happening? <div style="font-size:88px;line-height:88px;">I need <span sytle="color: ...

htmlcss

What is the best way to showcase a bootstrap card in a horizontal layout using Jinja 2 and a for loop

I'm facing a challenge in showing bootstrap cards in a horizontal layout instead of the default vertical arrangement using a for each loop. Below is the code snippet: <div class="row"> <div class="col-lg-12"> {% for game i ...

htmlcsstwitter-bootstrapjinja2bootstrap-4

What is the most effective way to align a thumb to the left and content to the right?

What is considered the optimal method for positioning an image to the left with two text fields to the right of it? Is using floats or positioning better? <li> <a href=""> <img src=""THUMB HERE /> </a> <a href=""> TITLE </ ...

css