CSS border around div containing span while fitting to content perfectly

Question

I am trying to have a div wrapping a span element in this way:

----------
|Sentence|
----------

-----------------
|It's a looooong|
|sentence       |
-----------------

It works for short sentences but not for long because the end result is like:

----------------------
|It's a loooong      |
|sentence            |
----------------------

The code is like:

.div-with-border {
    display: inline-block;
    border: 1px solid red;
}
.div-with-border span {
    display: block;
}

table{
    width: 100px;
    font-size: 16px;
}

<table>
  <tr>
    <th width="50%"></th>
  </tr>
  <tr>
    <td>
      <div class="div-with-border">
        <span>Sentence</span>
      </div>
    </td>
  </tr>
  <tr>
    <td>
       <div class="div-with-border">
         <span>It's a loooooong sentence</span>
      </div>
    </td>
  </tr>
</table>

I basically want to remove the blank gap that exists between the word break and the right limit of the div edge, as shown in the example above.

Not sure if I understand what you mean, do you just need max-width for the div or span? — Esko, Apr 11 '19 at 12:27
I think we need to know more about the container and how its width is defined, and how you want your div's width to be defined in relation. — Mark Lyons, Apr 11 '19 at 12:29
If I understand well, in a multi line block, you want the div to be exactly the width of the longest line? — GuCier, Apr 11 '19 at 12:29
[like this?](https://jsfiddle.net/ra3ox2hf/) just use a br tag and remove the `max-width` — weegee, Apr 11 '19 at 12:33
@window.document I mean that is nice, but the text should be built dynamically — renatodamas, Apr 11 '19 at 12:35
I mean that I just hard coded _This is a long sentence_ for example purposes. The value for the ```span``` is calculated. — renatodamas, Apr 11 '19 at 12:38
Or are you looking for something [like this](http://jsfiddle.net/esr9zynj/1/)? — weegee, Apr 11 '19 at 13:02
@RenatoDamas, I think my answer should still work in the context of your updated question. It will fail if you have one word that is longer than your 100px limit. Do you want that to be the only scenario in which the container will grow wider? https://jsfiddle.net/szmcLyx6/ — Mark Lyons, Apr 11 '19 at 13:30
@MarkLyons you forcing the second ```div``` to have the same width size as the first ```span``` found in the the ```table```. Plus, if there would be a way to avoid javascript, that would be even best. — renatodamas, Apr 11 '19 at 13:40
Unfortunately I don't believe this is possible in pure CSS. You're right though, I was determining it based on the first `
`'s width. Here it is calculating each width individually. https://jsfiddle.net/38uqtram/2/ Note that I removed the `display:block;` declaration for your span. — Mark Lyons, Apr 11 '19 at 13:46
is it supposed to used the longest word ? if yes then the classic table + width:0 will do the job https://codepen.io/anon/pen/EJmeYK — G-Cyrillus, Apr 11 '19 at 13:46
I had the wrong JSFiddle link originally, here is the correct one with your example: https://jsfiddle.net/9cht0n5g/ — Mark Lyons, Apr 11 '19 at 13:51
I seem to be close with the property ```display: table-caption;``` on the ```span```. But that breaks short sentences, I don't know why :S — renatodamas, Apr 11 '19 at 13:59
@RenatoDamas Ah, I gave that a try as well and ran into some difficulties. If it does end up working for you, it would be great if you could post the answer here! — Mark Lyons, Apr 11 '19 at 14:13
It does not because that alone breaks A sentence like ```abc def``` in half. Perhaps must be combined with something else — renatodamas, Apr 11 '19 at 14:19

score 2 · Answer 1 · answered Apr 11 '19 at 12:39

2

Please make span display:block; and text-align:justify, this will help check below :

.div-with-border {
  display: inline-block;
  border: 1px solid red;
  max-width: 100px;
}
.div-with-border span{
   text-align: justify;
   display:block;
}

<div class="div-with-border">
  <span>This is a long sentence</span>
</div>

answered Apr 11 '19 at 12:39

Amarjit Singh

1,152
7
12

1

The only issue with this is it can result in some crazy bad looking word spacing. Try 'This is sentence' for example. – Mark Lyons Apr 11 '19 at 12:45
It depends on text content if you write "this is a" , it fits perfectly. – Amarjit Singh Apr 11 '19 at 12:49
@MarkLyons Exactly, for this example it looks good but not for all cases. For that reason, I can't still accept this answer – renatodamas Apr 11 '19 at 13:08
I don't like this answer because the ```text-align: justify;``` property gives it a bad looking result – renatodamas Apr 11 '19 at 13:30

score 0 · Answer 2 · edited May 05 '19 at 09:10

This is a consequence of how browsers resize elements when text wraps. I don't think a pure CSS solution to this is possible.

One way you could accomplish this is to calculate the text width in Javascript, as it will not contain this word-wrap edge width. Then you can force the container <div>'s width to that:

$(".div-with-border").each(function() {
  var textWidth = $(this).find("span").width();
  $(this).width(textWidth);
});

I'm using jQuery to do this but you could also use vanilla JS. The width of the text (specifically, the longest line of text) is the .offsetWidth.

Here's a JSFiddle.

CSS border around div containing span while fitting to content perfectly

2 Answers2