How to Prevent Text in a Table Cell from Wrapping

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.

prevent text in a table cell from wrapping --with empty colum

Apply white-space: nowrap; to the <th> elements.

Here is an example: https://jsfiddle.net/b1e0x672/2/ with some padding just to keep it nice on the eyes. You will probably want to make your CSS more specific than mine so that nothing interferes with its styling.

You may also noticed I applied a vertical alignment to the td elements. If you apply vertical-align: top; to your <td> elements then they will always begin just under your heading instead of the middle of the table.

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;
}

Prevent table from wrapping

If the css white-space does not work, you can try to add nowrap="nowrap" to your td, just like you added valign="top".

Very ugly, but it should work.

Edit: Ah, now I see: A table is a block-level element so it will always go to a new line unless you make it an inline-element or float it.

How to prevent word break in fixed layout table cell?

Apply CSS word-break:keep-all to the cells.

table { width:100px; border:1px solid black; }th, td { word-break:keep-all; border:1px solid black; }

<table  id="escalation" class="table table-striped table-bordered" cellspacing="0">

                <thead>                    <tr>                        <th style="display:none">ID</th>                        <th>RID</th>                        <th>Asset Name</th>                        </tr>                </thead>                <tbody>
                        <tr>                            <td>1</td>                            <td class="td-limit">102345</td>                            <td class="td-limit">Application Testing Break</td>                         </tr>
                </tbody>            </table>

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

import React from "react";// import { makeStyles } from "@material-ui/core/styles";import Table from "@material-ui/core/Table";import TableBody from "@material-ui/core/TableBody";import TableCell from "@material-ui/core/TableCell";import TableContainer from "@material-ui/core/TableContainer";import TableHead from "@material-ui/core/TableHead";import TableRow from "@material-ui/core/TableRow";import Paper from "@material-ui/core/Paper";
import Css from "./styles.css";
function createData(name, calories, fat, carbs, protein) {  return { name, calories, fat, carbs, protein };}
const rows = [  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),  createData(    "Ice cream sandwich dsdadsads dsadsadsadsa dsadasdsadsa dsadsadsa dsadsads asdsadsadsadsa",    237,    9.0,    37,    4.3  ),  createData("Eclair", 262, 16.0, 24, 6.0),  createData("Cupcake", 305, 3.7, 67, 4.3),  createData("Gingerbread", 356, 16.0, 49, 3.9)];
export default function SimpleTable() {  return (    <TableContainer component={Paper}>      <Table aria-label="simple table">        <TableHead>          <TableRow>            <TableCell>Dessert (100g serving)</TableCell>            <TableCell align="right">Calories</TableCell>          </TableRow>        </TableHead>        <TableBody>          {rows.map(row => (            <TableRow key={row.name}>              <TableCell component="th" scope="row">                <div className={Css.textContainer}>                 {row.name}                </div>              </TableCell>              <TableCell align="right">{row.calories}</TableCell>            </TableRow>          ))}        </TableBody>      </Table>    </TableContainer>  );}

.textContainer {  display: block;  width: 200px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}