3

We have text-elements with defined spacings in between them. They can be multiline. Now if the text breaks inside of them, width:auto is not correct - it somehow should be recalculated after the text broke onto new lines.

Current situation:

enter image description here

Desired situation:

enter image description here

I created a simple fiddle for it: https://jsfiddle.net/zd73vfne/

max-width: 260px

is just for demonstration purposes, so the text breaks. Using word-break is not an allowed solution per requirement.

I've added another example with multiple boxes next to eachother, which shows the problem even better: https://jsfiddle.net/zd73vfne/2/

Is there a pure CSS solution?

Raphael Jeger
  • 5,024
  • 13
  • 48
  • 79
  • 1
    You can use this `word-break: break-word;` – Daddys Code Mar 24 '21 at 07:05
  • I should have said that: words are not allowed to break by requirement of our customer – Raphael Jeger Mar 24 '21 at 07:08
  • @DaddysCode break-word only seems to work to break a long word if it cannot fit into the element with max-width so it doesn't seem to help this case. – A Haworth Mar 24 '21 at 07:12
  • no, there is no CSS solution for this. There is no solution simply because there is no problem to start with. – Temani Afif Mar 24 '21 at 09:52
  • funny that you decide if there's a problem or not @TemaniAfif :-D Our customer sees it as a problem, as the visual spacings between the text-elements (the border is only there for illustrative reasons) should be equal. So yes, it is a problem :-) – Raphael Jeger Mar 24 '21 at 10:09
  • I didn't decide. CSS is made that way and this is bydesign so *it's not a problem*. you customer simply don't like how CSS behave that way so you need to first explain to him that this is indeed the logical result of CSS then try to do things differently or convince him to accept this. – Temani Afif Mar 24 '21 at 10:21

0 Answers0