Word wrapping in CSS results in excessively large gaps between individual words

Hey there! I'm experiencing an issue with text wrapping when the window is resized. Even though I have added CSS code to make it wrap nicely within its container, it doesn't seem to be working as expected:

article {
    overflow: auto;
    word-wrap: break-word;
}

Interestingly, removing this code doesn't change the behavior at all - the text still wraps near the end of the line.

The big gaps between words are really bothering me. I've seen other websites where text wraps nicely without any extra code. Can someone help me fix this space issue? Thank you!

htmlcsswhitespaceword-wrap

Answer №1

It is my belief that the text-align: justify style has been passed down from the parent HTML elements. One alternative approach could be adjusting the CSS in the following manner: 

article {
    overflow: auto;
    word-wrap: break-word;
    text-align: start;
}

Answer №2

It appears that the article element is inheriting the style text-align: justify; based on feedback in the comments. To correct this alignment issue, consider implementing the following solution:

Check out this solution on jsFiddle

article, .unjust {
    /* default alignment */
    text-align: left;

    /* strong override */
    text-align: left !important;
}

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

Tips for correctly aligning input text boxes

https://i.sstatic.net/9fVwA.jpg I have created a code for an average calculator using HTML, CSS, Bootstrap, and JavaScript. The problem I am facing is with the alignment of the input text boxes. How can I adjust them properly? The user should enter the ...

htmlcssbootstrap-5

Using Thymeleaf to display <TR> elements according to specific conditions

Is there a cleaner way to show content only if one object is not null? No annotations found in this block of code. Here is the template: <div th:if="${currentSkills != null}"> <tr ><!-- Data File --> <td class="col_id"> ...

htmlthymeleaf

Transmit information from an index to a Bootstrap popup

Seeking assistance with passing data from the index page to a modal. Below is the code snippet for the modal: Modal <div class="modal modal-1 fade bd-example-modal-lg " id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleMod ...

javascriptjqueryhtmlbootstrap-4

I'm puzzled as to why the hidden input field consistently returns the same value every time

As a beginner in php, I am facing an issue where I cannot trace the correct value of the hidden input which represents the ID of the image in the products table. Every time I try to delete an image, it always returns the ID of the last image in the product ...

phphtmlcss

Positioning an image so that it is perfectly aligned on top of another image that is centered

http://jsfiddle.net/Weach/1/ The issue at hand involves a background image created using CSS. This image has been center aligned both horizontally and starting from the top, as visible in the provided JSFiddle link. Specifically, there is another image t ...

htmlcss

Create a div element using JQuery mobile

I am experiencing an issue where a div on my webpage is supposed to refresh every 3 seconds, but the CSS is not being rendered correctly after each refresh. Below is the code I am using: HTML: <div id="statusbar"></div> JavaScript: $( docu ...

htmljquery-mobilerender

Position the image between two div containers in the center of the screen, ensuring it is responsive and does not overlap with any text

I've been working on trying to position an image between two divs on my webpage. So far, I've managed to place the image there but it's not responsive (only displays correctly at a width of 1920) and ends up overlapping the text in both divs ...

htmlcssresponsive-design

Capturing and saving detailed hand-drawn artwork in high resolution

Is there a cutting-edge solution available for capturing hand-drawn sketches (from a tablet, touch screen, or iPad-like device) on a website using JavaScript and saving it on the server side? Essentially, I am looking for a mouse drawing canvas with a hig ...

javascriptjqueryhtmltablet-pc

Updating image source dynamically with Flask

I am currently developing a face detection application using Flask. I aim to have the detected faces displayed in real-time on the HTML page. For the JavaScript aspect, I am utilizing getUserMedia to live stream camera images from the client to the server ...

javascriptpythonhtmlflask

Confirm that the phone number is in the correct format using HTML

Hello, I am attempting to validate a phone number using the following format: 080******** 081******** 082******** 083******** I have tried the following code: <input type="tel" name="signupMobileTel" placeholder="08121234567" size=11 pattern="/^(08( ...

htmlinputpattern-matching

Please fill out and submit a form by clicking on a button in HTML

I am currently developing a software program that needs to automatically submit a form on a webpage by "clicking" on a button: <button class="form" type="submit">Send</button> Based on my limited knowledge, I understand that in order to submi ...

htmlformssubmit

Turning off a hyperlink with jQuery

Is there a way to effectively disable a link in jQuery without changing the anchor's href attribute? I initially tried setting disabled to true, but it seems that approach isn't working as expected. The goal is to prevent the user from being redi ...

javascriptjqueryhtml

`In Firefox, perspective can lead to unexpected overflow errors.`

Having difficulties setting up a parallax effect using CSS perspective and translateZ. Encountering strange overflow errors specifically in Firefox. Check out the issue here When moving the mouse around, noticing that the background-image is getting crop ...

cssfirefoxperspective

Display two examples from the material-ui documentation

My goal is to merge two demos found in the material-ui documentation. Clipped under the app bar - Describes a page layout Fixed header - Illustrates a table with a fixed header. I am looking for a solution where the table occupies the entire available p ...

cssreactjsmaterial-ui

Creating an infinite loop of SVG rectangles pulled from a database

As I extract svg rectangles from a database using Python, I find myself hardcoding the process in order to change the colors of each rectangle in my CSS style sheet. With potential scalability issues in mind - if there were 100 rectangles - I am wondering ...

pythoncssmysqlsvg

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

I have a code that includes an image, HTML, and CSS code. Can anyone please tell me how I can set up a drop-down menu list to open the sub <li> elements when I click on a parent <li> using JavaScript? You can see the appearance of the code in t ...

javascriptphphtmlcss

Unable to properly align divs vertically

Having trouble getting some divs to align properly, whether they are in an accordion or not. The current layout is not what I want: My goal is to have them vertically aligned at the top, despite varying lengths. Any help would be appreciated. I attempted ...

javascriptjqueryhtmlcssvertical-alignment

Checking the validity of an input element with jQuery: How to determine if the valid or invalid pseudo-class has been applied?

Is there a way to check for the application of the CSS3 :valid or :invalid pseudo-class on an input element using jQuery? I want to verify if the form element has passed CSS validation before allowing the submit button to be enabled. Here are some methods ...

javascriptjqueryhtmlcss

Out of nowhere, JavaScript/jQuery ceased to function

Everything was running smoothly on my website with jQuery Ui until I changed the color, and suddenly everything stopped working. Any ideas why this happened? I even tried writing the JavaScript within the HTML file and linking it as a separate .js file, bu ...

javascripthtml

Ways to prevent the TAB key from automatically shifting focus to the next element after using scrollIntoView during page initialization in the Chrome browser

Encountering a strange issue specifically on the Chrome browser. After the page loads, I am using the scrollIntoView method in the ngAfterViewInit of an Angular component. When the page loads and scrolls to the element, everything appears to be functioning ...

javascripthtmlangulargoogle-chromejs-scrollintoview