How to get rid of white space without breaking words?

Question

I am trying to make a paragraph to fit the width of a text however, I am getting this white space on line breaks. I am looking for any solution that wouldn't affect text and wouldn't require JavaScript (that could cause a reflow). Doesn't have to be inline-block.

* {
    margin: 5px;
    padding: 5px;
}
div {
    background: gray;
}
p {
    background:white;
    border-bottom: 1px dotted black;
    display: inline-block;
    max-width: 130px;
}

<div id=container>
    <p>technique and statement a landscape or discovery a injection or fic</p>
</div>

Demo Fiddle

Is there any way that I can make paragraph width match the width of the longest line?

Here is the expected and current result:

@James I have added an image that shows expected and current result — TwistedOwl, Aug 03 '21 at 17:26
"match the longest line" - as @James said, there is only one line. You are artificially making line wraps with the max-width. You either need to put real line wraps into the text, or continue to adjust the max-width. — skyline3000, Aug 17 '21 at 01:26
that might be because of max widh property. use width 100% instead. you container is more than 130px might be the case or use max width in the container instead — Salil Rajkarnikar, Aug 17 '21 at 05:04
I think @skyline3000 is right and the only solution is to give manual line breaks — TwistedOwl, Aug 17 '21 at 12:50

Salil Rajkarnikar · Answer 1 · 2021-08-17T09:54:56.983

0

* {
    margin: 5px;
    padding: 5px;
}
div {
    background: gray;
    max-width: 130px; // you can ignore this if you dont need to be 130 px
}
p {
    background:white;
    border-bottom: 1px dotted black;
    display: inline-block;
    width:100%;
    
}

edited Aug 17 '21 at 09:54

answered Aug 17 '21 at 05:06

Salil Rajkarnikar

588
1
7
26

2

Explain your answer please. – raven Aug 17 '21 at 09:46
that might be because of max widh property. use width 100% instead. you container is more than 130px might be the case or use max width in the container instead – Salil Rajkarnikar Aug 17 '21 at 09:54

TwistedOwl · Accepted Answer · 2021-08-17T12:54:33.527

As @skyline3000 mentioned:

"match the longest line" - as @James said, there is only one line. You are artificially making line wraps with the max-width. You either need to put real line wraps into the text, or continue to adjust the max-width.

You need to manually specify line breaks which work for me - handling line breaks is rather an easy job for regular users.

body {
    background: gray;
}
#container {
    background: white;
    display: inline-block;
}
span {
    border-bottom: 1px dotted black;
    max-width: 130px;
    background: white;
}

<div id=container>
    <span>technique and<br>statement alandscape<br> ordiscovery ainjectn or
fic i</span>
</div>

JsFiddle

Also, I have decided to move to the span element and wrap it into display: inline-block to achieve this result. I don't know if this result is satisfying to you, I'm not sure if I was trying to fight HTML/CSS spec here. Real line breaks are probably the only solution.

How to get rid of white space without breaking words?

2 Answers2