Tips for avoiding unnecessary white space at the bottom of an HTML paragraph when using maximum width

Whenever I set a <p> tag with a specific max-width, the paragraph sometimes ends up taking more horizontal space than necessary due to text formatting. Is there a way to make it shrink to fit the minimum required horizontal space without altering the text visually? Below are my design criteria:

  • The max-width property is specified
  • The text appearance remains unchanged, avoiding hyphenation at line breaks
  • A background color should fill exactly within the defined area, no overflow allowed

For illustration, in this demo, the first paragraph's width measures 123px although 104px would suffice for its content, similar to the second example.

An image presented highlights the excess space that needs removing, contrasting with the desired outcome displayed in the second paragraph:

https://i.sstatic.net/i2Zo6.png

Any suggestions on how to accomplish this?

htmlcsspaddingparagraph

Answer №1

After exploring various options, I've discovered that achieving this particular design using pure CSS and HTML alone is not feasible. However, a solution can be implemented with the help of JavaScript.

To achieve the desired structure, we need a more intricate setup involving a <span> nested within a <div>, with styling targeted at the div element (such as background color and setting the maximum width). The following snippet of JavaScript code must be executed to properly set the width of the div:

const container = document.getElementById('container');
const paragraphSpan = document.getElementById('paragraph-span');
container.style.width = paragraphSpan.offsetWidth + "px";

You can find the comprehensive solution linked here.

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 text relentlessly presses the button within the confines of bootstrap

I am facing an issue with the alignment of the buttons in my HTML code. As the text inside the <p> tag grows, it pushes the button to the right. I want all the buttons to be positioned in the bottom-right corner of every div regardless of the text si ...

htmlcssbootstrap-4

I'm having trouble keeping my navbar fixed

Having trouble keeping my navigation bar fixed I attempted using the <nav class="fixed-nav-bar> with no success. I also tried adjusting it in CSS, but it still wouldn't stay fixed. <nav role="navigation" class="navbar navbar-default"> ...

javascripthtmlcss

What is the best way to make the button cover the entire width?

I have a Vuetify card with a layout where I am rendering some dynamic Vuetify components inside the card based on checkbox selection. These components can be a divider, a spacer, toolbar, or a button. However, I'm struggling to make the buttons span t ...

javascriptcssvue.jsvuetify.js

Seeking assistance in setting up a search view and integrating it into an HTML page with data from my Django database

Currently engaged in the development of a DJANGO website where users can input words and their associations for better recall. The word insertion feature has been successfully implemented. However, facing a roadblock while trying to set up the word search ...

htmldjango

The JavaScript function modifies the value stored in the local storage

I'm in the process of developing a website that requires updating the value of my local storage when certain JavaScript functions are executed. Currently, I have this code snippet: localStorage.setItem('colorvar', '#EBDBC2'); I&ap ...

javascripthtmlcssfrontendstorage

table rows are styled with hover effects and alternating colors using CSS

Styles for even and odd table rows are set, but hovering over the table rows is not working. Test it out here: http://jsfiddle.net/w7brN/ CSS style : #table_even tr:hover { background-color:#fffbae!important; } /* hover effect */ #table_even tr:nth-ch ...

htmlcss

Beginner in CSS wanting to set background image for input field

I am working on incorporating icons into my project. The image I have contains an array of 16x16 icons at this URL: "http://www.freepbx.org/v3/browser/trunk/assets/css/jquery/vader/images/ui-icons_cd0a0a_256x240.png?rev=1" Does anyone know how I can selec ...

css

Switching the input type from file to text

My request is to have a file input type that is initially set as read-only, yet still allows the user to manually enter the file name in a text box. Is there a way to achieve this? I want to be able to write the file name similarly to how I would input t ...

javascriptjqueryhtml

The picture is not appearing on the screen. Django

I'm having trouble finding the issue (probably a syntax error). My images are not appearing and instead I see "NO FILES" displayed. html <!-- RECENTLY ADDED FILES --> <div class="buttom-box floatleft"> <h3>R ...

htmldjangodjango-templates

Using the "align" attribute is considered outdated and not recommended in HTML5 documents

I have encountered an error when using the align attribute. How can I fix this issue with the correct HTML5 compatible syntax? <table style="margin: 0 auto;"> <tbody> <tr> <td><input typ ...

jquerycsshtmljsp-tags

Learn how to track user modifications in HTML code on the client side

When a user input form is displayed to a client (developed in PHP), if the client opens the source using Firebug or a similar tool and modifies some restrictions on the form (e.g. increase maximum length/change field name, etc.) and submits the form to the ...

phphtml

Tips for modifying the appearance of this input document

Hey there, I have this input element created in React: <span className="btn-file" type='button'> <div style={{display:'flex',justifyContent:'space-around'}}> <span style ...

htmlcssreactjs

add text above and below a button in a Button style

Just delving into HTML and CSS, I've created a button with the following styling: .Btns { width:200px; height:75px; background-color:lightblue; color:black; font-weight:bold; ...

jquerycss

Tips for organizing and centering Kendo radio buttons within a Bootstrap grid and form structure

After trying the Bootstrap method [3] without success, I am now implementing the radios according to approach [1]. Even after applying the fix for box-sizing as suggested in [2], it doesn't seem to resolve the issue. <div class="panel panel-defa ...

htmlcsstwitter-bootstrapkendo-ui

The PHP Admin Panel conveniently shows the Edit post form right at the bottom of the page

After following a PHP CMS tutorial, I created this awesome website for a school. It's my first dynamic website, and I even managed to create an admin panel that looks like this. Admin Panel Pretty cool, right? Initially, I followed a basic tutorial ...

phpcsstwitter-bootstrapadmin

Populate any void area when <td> is not occupied in <tr>

I have a table with two rows and columns. If one of the columns is empty, it should move up to the upper row. For example: |td1 | td2| |td3 | | |td5 | td6| This is what I want: |td1 | td2| |td3 | td5| |td6 | | Below is the code snippet that ...

htmlcsstwitter-bootstrap

Finding the index number of a DIV element when it is clicked

Here is an example of the HTML structure I am working with: <div id="preview-wrapper"> <div class="dz-preview dz-image-preview"> <a class="rotate-a" href="javascript:void(0);"> <img class="rotate" src="public/a ...

javascriptjqueryhtml

jQuery fails to register a click event on a child element

I've designed a div element to serve as a contact list, containing other divs within it. I'm attempting to set up a click handler on each list item (inner div) but the click event is not being triggered. $(".contact").on("click", function() { ...

javascriptjqueryhtmlcss

Is there a way for me to have a table automatically scrolled to a specific column upon loading the HTML page?

My table contains a dynamic number of columns based on the months inputted from the database starting from a start_date and ending at an end_date. I have the current_date stored as a variable and want the table to load with the x-scrollbar positioned right ...

javascriptjqueryhtmlcss

In order to preserve the data inputted by the user within a file

Check out this HTML code snippet:- ` AngularJS | $http server <div ng-controller="people"> <ul> <h2> Names and Ages of programmers: </h2> <li ng-repeat="person in persons"> { ...

javascripthtmlangularjs