css Question posted in
Some basic documentation can be found here.

Css – How do I prevent `inline` element from overflowing while not wrapping?

I have the following code:

html, body {
    max-width: 150px;
    overflow: auto;
}

body {
    font-size: 16px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: none;
}

code {
    white-space: nowrap;
    overflow: auto; /* Doesn't Do Anything */
}
<p>So as you can see, the <code>code element</code> breaks as I want it to</p>

<p>but this <code>"long" code element overflows</code></p>

I want the text inside p tag to wrap, whereas I don’t want the text inside code to wrap, but I also don’t want the code element to overflow, rather it’s max-width to be 100% and after that I want it to be scrollable.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I ended up doing this instead:

    p {
    overflow: auto;
}

    it's simple & short, thus the final code looks like this:

    html, body {
    max-width: 150px;
    overflow: auto;
}

body {
    font-size: 16px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: none;
}

code {
    white-space: nowrap;
}

p {
    overflow: auto;
}
    <p>So as you can see, the <code>code element</code> breaks as I want it to</p>

<p>but this <code>"long" code element overflows</code></p>


  2. 0

    The comment told you correctly: in order to properly overflow the <code> tag, you need to give it a block internal structure. Also, don’t forget about vertical alignment.

    html, body {
  max-width: 150px;
}

body {
  font-size: 16px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: none;
}

code {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: auto;
  vertical-align: bottom;
  color: red;
}

/* Only for example --> */ p { background-color: #fc08; overflow: auto; resize: both; }
    <p>So as you can see, the <code>code element</code> breaks as I want it to but this <code>"long" code element overflows</code> Now it works!</p>

    Run the snippet and resize the paragraph by grabbing the bottom right corner.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search