What is the best way to ensure that my text always aligns perfectly to the end of the line?

I've been struggling to create a column layout where the text perfectly aligns with the end of the line, but so far, I haven't had any success. Despite my efforts to find a solution online, I have come up empty-handed.

What I'm aiming for is to have the text neatly aligned at the end of the column, similar to how it appears on this webpage:

I attempted to achieve this by setting a max-width using the following CSS code:

.article-maxwidth{
  max-width: 40vw;
}

However, it was quite inaccurate in practice. I also tried using the 'w-75' class, which again did not produce the desired result. I observed that the webpage achieves this effect by adding spaces somehow. If the text is not long enough, the page fills in larger spaces to push the text to the end of the column.

Below is the current code snippet that I am trying to adjust:

<div class="wrapper container-fluid shorter">
        <div class="blog-body article-maxwidth">

            <h5 class="main-title">Jak postavit dům levně aneb proč jsou typové domy tak levné</h5>
            <p class="author"><i class="fas fa-pen-fancy"></i> Realitní tržnice</p>

            <p>Velmi často, když s někým řeším cenu stavby dochází na druhé straně k zděšení, jak je možné, že domy co navrhujeme jsou tak drahé. Ano všichni jsou často nadopovaní marketingovými steroidy, které na ně firmy prodávající typové projekty nebo typové domy chrlí.</p>

            <div class="image">
                <a href="images/5.jpg" data-rel="lightcase">
                    <img src="images/5.jpg" alt="Exotická kuchyně">
                </a>
                <span class="title">Exotická kuchyně</span>
            </div>

            <h2>Dlouhá cesta do ráje</h2>
            <p>Letiště v Bangkoku je krokem z komfortní zóny pro všechny, kdo se bojí sednout do letadla. Let do vysněného ráje trvá kolem 12 hodin s minimáln...

If anyone has insight into how I can achieve this specific text alignment within a column or knows of thorough documentation on this issue, I would greatly appreciate your suggestions. Thank you!

Answer №1

To adjust the text flow, consider using text-align: justify

.content {
  display: block;
  width: 40%;
  height: auto;
  padding: 10px;
  background-color: lightgray;
  color: black;
  text-align: justify;
}
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil molestiae voluptatum sunt nostrum eos maxime in temporibus accusamus, a vero laudantium sapiente? Officiis minima animi magnam sequi recusandae reiciendis libero!</p>
</div>

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

Why isn't the selected option appearing first?

I have written a PHP code to display the specified div <div id="main_catsel"> <select id="maincat" > <option value="1">none</option> <option value="2">Computer</option> <option value="4">Refrigerator& ...

Switching out an element within a constrained array causes a momentary disappearance of the item

My playlist features artwork images that can be clicked. Upon clicking an image, the current track is replaced by the new selection in the array. An issue arises when Ember re-renders the items, causing a brief moment where the replaced element disappears ...

Are desktop values taking precedence over the mobile media query?

Currently, I am facing an issue with aligning icons (images) under each title on a page that lists various classes. The icon needs to be centered below the title on both desktop and mobile versions of the site. However, I have encountered a problem where u ...

Enhancing websites with font-awesome icons and upgrading from older versions to the latest

Seeking guidance on updating our project to use the latest Macadmine theme. The transition from Font Awesome 3 to Font Awesome 4 requires changing all icons to their proper names. I came across a helpful resource at https://github.com/FortAwesome/Font-Aw ...

struggling to rectify an undefined index error on my PHP page

My challenge revolves around accessing the token from an HTML page, where I have an input element containing the token. Whenever I try running this page on a server (WAMP) on Windows 7, I encounter an error stating "undefined index" on the "api_key". How ...

Exploring Selenium: Clicking on Auto-Complete Suggestions using Python

Attempting to interact with an auto-complete search bar on the site in order to search for results. Wanting to click on the drop-down element that appears after entering a city name to perform a full city name search and obtain results. Below is the cod ...

What is the method for toggling background URLs?

Currently, I am utilizing flaunt.js by Todd Moto for my navigation system. My goal is to seamlessly switch the hamburger image with another image when the mobile-menu is shown and hidden. Check out the demo here. For a detailed tutorial, visit this link. ...

Tips for designing a form action

I am a beginner and struggling with understanding the CSS for the code below. Can someone help me out? <div id="page-container"> <?php include_once("home_start.php"); ?> <h1>Login</h1> <for ...

Bone Structure Styles - adaptable form

I'm currently working on a form using skeleton css and initially set it up with a three-column layout. However, I found that this created too much white space due to varying content lengths in each column. I would like to switch to a horizontal layout ...

Using JQuery functions from other JavaScript files is Simple

When it comes to my CSS, I have taken the approach of creating smaller files for specific functions and then using minification to merge and compress them into one file for easier download. I want to apply the same strategy to my JS Files by logically sep ...

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 ...

When attempting to showcase an image within an Angular form, the error message "Form control with unspecified name attribute lacks a value accessor" is displayed

I have a scenario where I am overlaying icons on an image within my ngForm. The goal is to allow users to drag the icons and save their new location when the form is submitted. Everything works as expected, but I encounter a pesky error whenever the page l ...

What is the best way to emphasize a row in an Angular Material table based on a

I am facing an issue with highlighting row colors conditionally in my code. Although there are no errors, the background color is not being applied to the rows as expected. I have a total of 5 rows with the 'riskIndex' value set to 'H'. ...

Tips for pressing the enter key to submit when faced with two buttons

I am developing a form with two input fields and their respective submit buttons. I want users to be able to enter text into either field, hit the Enter key, and have it trigger the same action as clicking the submit button. Currently, pressing Enter after ...

The functionality of two-way data binding seems to be failing when it comes to interacting with Knock

I am currently working on a piece of code that consists of two main functions. When 'Add more' is clicked, a new value is added to the observable array and a new text box is displayed on the UI. Upon clicking Save, the values in the text boxes ...

Improper Alignment of Bootstrap 4 Navbar Link: Troubleshooting Required

Take a look at the image for the issue: https://i.stack.imgur.com/u9aCy.png As shown in the image, the NavBar links are stacked instead of being displayed in one row. This is the HTML code I have used: <!doctype html> <html> <head> ...

Minimize or conceal iframe

This iframe contains a Google form that cannot be edited. I am looking for a way to close or hide this iframe, either through a button, a popup window button, or without any button at all. The $gLink variable holds the Google form link through a PHP sessio ...

Backdrop behind of Bootstrap modal located back of other page contents

I'm facing some challenges after transferring a website I developed locally to a live server. The modal windows are appearing behind other content on the live server, although they work perfectly fine on the local version. Despite my attempts to adju ...

React Navigation Item Toolbar Misplacement

I've been trying to align the navigation item with the logo on the same line within the toolbar, but I'm facing an issue where they keep appearing in different rows. To see the error for yourself, check out the code sandbox here. This is how I s ...

Enhancing larger elements with a combination of CSS background-image gradients and border lines

My design calls for a background image with a line at the end. The line should start right where the background size ends, and in my concept it is grey. It's important that this line remains as one cohesive element. background-image: linear-gradient( ...