Tips for eliminating excessive spacing between words to achieve justified alignment on a mobile device

please add image description hereMy issue is with using text-align: justify; as it sometimes creates large gaps between words. I attempted to resolve this for mobile devices by using text-justify: inter-word;, but unfortunately, it did not work.

@media screen and (max-width: 640px) {

.mobile-con{text-align: justify !important; text-justify: inter-word;}

}

Html

<p style="text-align: justify;" class="mobile-con">
                           Star aims to be the world class consortium of choice by
                            delivering projects within time & budget and to the 
                            required standards of quality by the fusion & best
                            application of human intellect & ethics with the 
                            combination of modern technology. 

                        </p>

Any suggestions on how to fix this issue?

Answer №1

Apply the CSS property word-break: break-all; in order to break all words so they can fit within a specified width.

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

Discover the magic of TransformToggle and slideToggle in Javascript, HTML, and CSS

Working on a website coding project and ran into an issue. Trying to utilize an img as a link to slideToggle content. It's working, but I'd like the img to rotate 90deg on the first click and -90deg on the second one. Any solutions are greatly ap ...

Styling a fixed sidebar in Vue.js

I am currently working on a layout design that includes a fixed sidebar on the left side, positioned beside a container with its own grid structure. Utilizing Vue.js means each template contains <div> elements where I attempt to incorporate additiona ...

Adaptive website backdrop

I have created a unique background for my website design, which includes 3 slices labeled as div id top, middle, and bottom. You can view the design in this image. I am interested in making this background responsive. While I have come across examples of ...

Enhanced Bootstrap Carousel with White Background Transitions

Having trouble articulating my issue, so here's a video that should clarify: https://example.com/video I'm using a bootstrap carousel template for a full-width slider. Despite my efforts to remove the white-space transitions, they persist. Am I ...

Rearrange the following <div> to appear before the previous one on medium and small devices using Bootstrap

I'm working with this div from the Bootstrap framework: <div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0"> <div class="d-flex justify-content-between align-items-center"> <div class="h5 mb-0">Text text</div&g ...

Tips for using a button to update data without triggering a postback

Within the GridView in my ASP.net project, I have an ASP.net button with the following code: <asp:Button UseSubmitBehavior="false" runat="server" ID="btnShow" CssClass="btnSearch" Text="View All" CommandName="ViewAll" OnCommand="btnShow_Command" Comman ...

The offcanvas menu in the NextJS Tailwind website does not handle hover or tap events properly when outside of the parent dimensions

My header includes an off-canvas menu that slides in from the right side. Everything seems to be working fine, except for one issue: when the menu is open and visible, the mouse and touch events pass through it to the content underneath. Check out the cod ...

CSS for Adjusting Parent Height Based on Child Content

I've been working on adjusting the height of the parent class to fit the child class perfectly without overflowing Here is a snippet from my CSS file: Parent &__video position: relative; width: 471px; background: red; border-radius: 12px ...

Trouble displaying background image in Electron Application

When I try to load an image file in the same directory as my login.vue component (where the following code is located), it won't display: <div background="benjamin-child-17946.jpg" class="login" style="height:100%;"> A 404 error is popping up: ...

Having trouble with less.modifyVars not functioning properly in Visual Studio?

I attempted to dynamically change the LESS variable using HTML within an AngularJS function. The code worked fine on XAMPP with simple HTML and CSS, but when I transferred it to an enterprise app in Visual Studio, it stopped functioning properly. While the ...

I'm puzzled as to why the background isn't fully covering all of the content on the page

As an IT student, I have been diligently working on creating a website for my assignment. However, I am facing an issue with the background not adjusting properly based on the content placed within it. While one page includes all the sub-divs as intended, ...

What is the best method for assigning real-life units, such as centimeters or millimeters, to a dimension

Is there a way to set the height of an img in millimeters, regardless of the device being used? Currently, setting the CSS rule height: 10mm; actually translates to height: 37.8px, as explained in this link: http://css-tricks.com/the-lengths-of-css/ If p ...

How can I use JQuery to sum up the numbers within div elements?

Is there a way to automatically number the generated blocks? For example, the first block would display "1", the second "2" and so on. Below is my current code. Simply input the desired number of blocks in the input field. <!DOCTYPE html> <html ...

Using the <audio> tag in HTML5 on Android devices

Exploring discussions on Android's support for the <audio> tag has been enlightening. Despite attempts on a Nexus One running Android Froyo 2.2, it seems playing audio remains elusive. As indicated by www.html5test.com, while the tag is support ...

Is it possible to reach this result without relying on Modernizr?

Due to personal reasons that I won't delve into, my goal is to replicate the functionality of this menu : demo : http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ However, I want to achieve this without using Modernizr and poss ...

Is it possible to remove the left margin on an li element by placing a td element inside it using HTML and

Here is my custom HTML code including the CSS styles: <!DOCTYPE html> <html> <head> <style> table td { border: 1px solid black; } li { margin-left: 3 ...

Eliminate XML namespaces from HTML content generated through XSL in PHP

In my PHP routine, I am utilizing XSL to convert XML into HTML. The issue I am facing is that xmlns namespaces are being added as attributes to the h2 element during the transformation process. PHP: $url = "http://www.ecb.europa.eu/stats/eurofxref/eurofx ...

Using an image as a dropdown menu in HTML: A step-by-step guide

I am facing a challenge in creating an HTML/CSS button that should display a dropdown when hovered over, but unfortunately, it's not working as expected. Here is the link to the code. .Panel { overflow: hidden; width: 25%; height: 100%; co ...

Can the text color be customized to match the brightness level of the background area being covered?

Does anyone know of a plugin or method that can automatically change the color of text or swap predefined images/icons based on the average brightness of its parent element's background? If the background is dark, it should make the text white or swit ...

jQuery navigation is experiencing issues due to conflicting buttons

I am currently developing a web application that features two buttons in the header: Share and Options. When a button is clicked, its related content expands and collapses when clicked again. The issue arises when the user clicks on the share button and th ...