Preventing a <Pre> from Wrapping Inside of a Table

Preventing a pre from wrapping inside of a table

You can consisder width:0;min-width:100%; trick on the pre. The idea is that the width:0 will disable the contribution of pre on defining the width of the container then min-width:100% will force it to fill all the space:

.main-content {  max-width: 800px;  border: 1px solid red;}
th:first-of-type {  white-space:nowrap;} pre {  overflow: auto;  width:0;  min-width:100%;}

<div class="main-content">  <table border="0" class="config">    <thead>      <tr>        <th>Property</th>        <th>Description</th>      </tr>    </thead>    <tbody>      <tr>        <td class="config-name">name</td>        <td class="config-description">
          <p>Foo bar talking about some random things related to our code here in the paragraph:</p>          <pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>     </td>    </tr>    </tbody>  </table></div>

How to prevent text in a table cell from wrapping

Have a look at the white-space property, used like this:

th {
    white-space: nowrap;
}

This will force the contents of <th> to display on one line.

From linked page, here are the various options for white-space:

normal
This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.

pre
This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.

nowrap
This value collapses white space as for 'normal', but suppresses line breaks within text.

pre-wrap
This value prevents user agents from collapsing sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

pre-line
This value directs user agents to collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

wrapping pre inside table cell

try to use:

<pre><code> your example code here </code></pre>

Wrapping pre inside table cell

A friend of mine figured a way around this, it isn't the cleanest of solutions but was sufficient for my problem.

The solution was to take the blank spaces and replace them with alternations of   and as IE supports the wbr tag, it simulated the wrapping of text in a pre tag.

Hope this helps anyone else who runs into the issue!

How to prevent text in a display:table-cell from wrapping?

You can use nowrap to force the contents of <p> or first column container to display in one line.

{
   white-space: nowrap;
}

How to wrap text in table cell without wrapping child elements

I believe this is what you need: https://jsfiddle.net/oj141Lpp/1/

Changed the following:

.inline { 
   display: table-cell;
   vertical-align: top;
}

and removed the .nowrap class

How do I wrap text in a pre tag?

The answer, from this page in CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

How do I use a code tag in a table that does not wrap?

There are two ways of doing it, each with its own tradeoffs but both produce the same result.

1. Use <pre>

Insert <pre> into the <code>. Note that this is not the standard way of writing HTML. According to the spec, the <code> should be inside <pre> instead. This works for a Docusaurus site.

<td><code>organizationName</code></td>

would instead be written as:

<td><code><pre>organizationName</pre></code></td>

2. Add custom CSS targeting <code> [RECOMMENDED]

Add the CSS

code.block {
  white-space: nowrap;
}

and do:

<td><code class="block">organizationName</code></td>

The second way is cleaner and what I settled on. Since I only faced the problem when <code> was used as the first column in a table, I used the following CSS, which is also what Bootstrap website uses.

table td:first-child > code {
  white-space: nowrap;
}

The benefit of doing the above is that I can use Markdown syntax for my table and I do not have to add custom classes to it:

| `organizationName` | The GitHub user ... |

Final Result

How to prevent my text inside my TD part of the table from wrapping (shifting) when browser zooms in/out?

You can use white-space: pre style for paragraph, but your text should be divided into lines. Now you have each paragraph in single line.

Sample: http://jsfiddle.net/LD3uC/1/

---

Related Topics