Stop text horizontal overflow

Question

I have a div and inside of this div is text and this text overflows horizontally and I want to stop that.

Unfortunately, this is a little bit more complicated than it first sounds, because I want to create a div that has two columns and I want the right column to be 30px less wide than the left one.

I know I can solve this by creating two divs, but it would be really cool if there is a way to do this with one div. I was more or less able to do this by working with a parent- and child-element and adding margin-right: -30px; to the child, but unfortunately this margin, even though it is there, seems to collapse into the child and the text complete ignores it.

It would save me quite some work if I could figure this out, any ideas?

Fiddle: https://jsfiddle.net/qxnc3fts/3/

-> GOAL: Make it so that the text does not overflow out of the lightgrey div.

Edit: There is a similar question: Is there a way to specify different widths for columns in CSS3?, and there's a great answer there by @Quentin that definitely helped me but that answer does not make the text break and I would like that to happen. – But it seems like that's impossible. At least in the current CSS-version.

.ref {
  width: 200px;
  height: 10px;
  background-color: black;
}

.parent {
  background-color: lightgrey;
  width: 400px;
}

.child {
  column-count: 2;
  column-gap: 30px;
  margin-right: -30px;
}

<div class="ref"></div>

<div class="parent">
  <div class="child">
    i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i 
  </div>
</div>

It's impossible to pick and chose widths for each column using the columns layout, Unfortunately you can't avoid multiple divs for this. Does this answer your question? [Is there a way to specify different widths for columns in CSS3?](https://stackoverflow.com/questions/2453522/is-there-a-way-to-specify-different-widths-for-columns-in-css3) — Rainbow, Nov 06 '21 at 21:51
can you give us you real use case? I doubt you will have an element with `i` as content — Temani Afif, Nov 06 '21 at 22:42
@ZohirSalak Thank you! – Yeah… Looks like you just can't do it. But that's fine, there are ways around it, still would be a cool feature in future CSS-versions. :) — Simon R., Nov 06 '21 at 22:48
@TemaniAfif Hello! In my real-life-use-case there is just normal text inside the div, but, depending on the length of the individual words, it's sometimes hard to see where exactly the text breaks and so I just used those "i"s, that way I very exactly see where the break is. :) — Simon R., Nov 06 '21 at 22:51

score 0 · Answer 1 · answered Nov 06 '21 at 23:17

Your setting the box as an absolute width and the content no-overflow.
Here's a working solution:

.ref {
  width: 200px;
  height: 10px;
  background-color: black;
}

.parent {
  background-color: lightgrey;
  width: 400px;
}

.child {
  column-count: 2;
  column-gap: 3.5%;
  margin-right: -30px;
  overflow-x: auto, hidden;
  padding: 8px 30px;
  word-break: keep-all;
  display: inline-block;
  text-align: center;
}

<div class="ref"></div>

<div class="parent">
  <div class="child">
    i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i 
  </div>
</div>

the columns are still equal width – Rainbow Nov 06 '21 at 23:22 — Rainbow, Nov 06 '21 at 23:22

Stop text horizontal overflow

1 Answers1