-3

When I have an HTML paragraph (<p> tag) that has its max-width set, sometimes, depending on the text, the paragraph takes up more horizontal space than necessary. I would like to prevent this, i.e. make the paragraph shrink so that it only takes up the minimum horizontal space it needs for the text. The following are my design requirements:

  • max-width property is given
  • the text itself should look the same, so for example, it should not be hyphenated at line breaks
  • it should have a background color in its exact area, overflowing is not allowed

For example, in this fiddle, the first paragraph's width is 123px while 104px would be enough to fit its content, as shown by the second paragraph.

The following picture shows the extra space that I would like to remove, along with the desired outcome (second paragraph):

enter image description here

How can I achieve this?

user3738870
  • 1,415
  • 2
  • 12
  • 24
  • *no empty space at the end* --> what empty space? I see no one in both examples – Temani Afif Apr 28 '19 at 19:48
  • By empty, I mean there are no characters there, but the paragraph takes up the space (you can see the green background color there). – user3738870 Apr 28 '19 at 19:50
  • How do you define *"the minimum space needed for its content"*? – tao Apr 28 '19 at 19:51
  • I define it just like it's shown in the second paragraph. Its width should shrink as much as possible, while not letting its height grow more. – user3738870 Apr 28 '19 at 19:53
  • in the second example I see more spaces than the first one. If you check the space at the end of the second and last line you will see that they are more than the space on the last lines in the first examples. – Temani Afif Apr 28 '19 at 19:56
  • You never said anything about a fixed height. How do you determine the fixed height? – tao Apr 28 '19 at 19:56
  • Yes sorry, I think it works differently on Chrome. I only tested it on Firefox. – user3738870 Apr 28 '19 at 19:56
  • According to the current state of your question, [this](https://jsfiddle.net/websiter/f5e0yaor/) should do. Somehow, however, I believe that's not what you had in mind. Try to be specific, please. – tao Apr 28 '19 at 19:58
  • Your question makes absolutely no sense as asked. The unknown height, the confusion about empty space, "I define it just like it's shown", "the minimum space needed for its content"...none of it makes sense. I suggest refining your question. – Corey Apr 28 '19 at 20:00
  • A `max-width` value keeps the `width` at the specified minimum. No `max-width` value keeps the `height` at a minimum, considering all available `width`, inherited from parent(s). Therefore there is no technical way to determine a unique solution for your problem, unless you refine the requirement. If any word exceeds the available (or set) `(max-)width`, it will overflow, unless `break-word` is specified. – tao Apr 28 '19 at 20:07
  • @AndreiGheorghiu Added more details and an image showing the area that is superfluous (more than the minimum required). Overflowing is okay, the problem is the space still occupied by the paragraph. – user3738870 Apr 28 '19 at 20:20
  • @Corey I included a picture showing the empty space and added some more explanation. Also, the height should be kept as is shown in the picture and in the examples. – user3738870 Apr 28 '19 at 20:23
  • @TemaniAfif The picture shows the space that is not desired. Also the fiddles should work now, I had to create another one for Chrome. – user3738870 Apr 28 '19 at 20:35
  • duplicate of : https://stackoverflow.com/q/34995740/8620333 (TL;DR: you cannot do this) – Temani Afif Apr 28 '19 at 20:49
  • @TemaniAfif It should be possible. This is the way messenger displays messages after all... – user3738870 Apr 28 '19 at 21:20
  • 1
    messenger is not a simple app, it's a complex one where you will find a lot of JS (and other stuffs) involved. The messenger team will not play with only HTML/CSS to do things. – Temani Afif Apr 28 '19 at 21:24
  • The major difference between your two examples is ***not*** that you used `width` vs `max-width`, but the hard-coded value (`150px` vs `129px`). If you switch `width` for `max-width` and vice-versa, the result will be the same. That said, you still haven't specified any consistent design requirement for setting either `width` or `height` for your paragraph. How should it render with 10, 100 or 1000 words? How should it render in a very wide available space (`width`) and how when it's limited? You're asking us to write code for design rules you haven't yet set. Not possible. – tao Apr 28 '19 at 21:44
  • @tao I included the `width` for the second paragraph just for illustration purposes. I also tried to clarify the design requirements in my question. – user3738870 Aug 16 '22 at 16:43
  • @TemaniAfif That is very correct. In fact, I have investigated how they do it now and they do use a JavaScript function that explicitly sets the width value. I will write that as an answer. – user3738870 Aug 16 '22 at 17:01

1 Answers1

0

I have not found a way to achieve this with pure CSS and HTML, but there's a way with JavaScript.

Instead of the paragraph (<p>), we need a more complex structure: a <span> inside a container <div> and the styling has to be applied to the div (the background color and the max-width). The following JavaScript code has to run to set the correct width on the div:

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

The full solution is available here.

user3738870
  • 1,415
  • 2
  • 12
  • 24