CODEWITHSUNDEEP
htmlcss
user2769623
user2769623

Reputation: 153

CSS: Stop cell text from wrapping within cell

JSFiddle: http://jsfiddle.net/wTtsV/7/
In the case of overflow in the example, the text is taken newline. How to hide the text instead of being taken newline? I already tried with overflow: hidden, it does not work.

Upvotes: 0

Views: 225

Answers (1)

showdev
showdev

Reputation: 29168

I had success by adding table-layout:fixed to the table.
Then I added overflow:hidden; white-space:nowrap; to the table cell.
I had to adjust the width percentage due to the way table-layout:fixed renders tables.

#table{
    display: table;
    width: 100%;
    table-layout:fixed;
}

#t2{
    display: table-cell;
    background-color: green;
    width:80%;
    white-space: nowrap;
    overflow:hidden;
}

Working Example - jsFiddle

EDIT:

Here is another method using floated elements rather than display:table.
A minimum width is set on the container to prevent wrapping when the window is very small.

Caveat: Granted, this is not perfect as you have to specify a min-width for the container.
If text in the left and right divs can vary unpredictably, it will be difficult to determine what min-width is appropriate to prevent wrapping.

<div id="container">
    <div id="t1">some text</div>
    <div id="t3">some other text</div>
    <div id="t2">aaaaaaaaaa...</div>
</div>

#container {
    min-width:200px;
    width:100% !important;
    width:200px;
}
#t1 {
    float:left;
    background-color: red;
}
#t2 {
    background-color: green;
    white-space:nowrap;
    overflow:hidden;
}
#t3 {
    float:right;
}

http://jsfiddle.net/wTtsV/26/

Upvotes: 2

Related Questions