?
Solved

How to force text to wrap in a table cell?

Posted on 2008-11-01
11
Medium Priority
?
3,677 Views
Last Modified: 2012-05-05
So, I have a table with fixed layout.
I have a column that holds a long string that half of the time will not fit the column.
In Internet Explorer the string wraps nicely. In Firefox, the text just go straight stubbornly making the table look bad.
Now, if I wrap the text inside a "span" it behaves the same way in each browser.
If I wrap the text with a "p" tag, I can style the tag with the same width as the thead and the width is respected now. However, the text still does not wrap in Firefox. Adding "overflow:scroll;" to the "p" style makes the width respected in both browsers but it looks awful with the scroll bars.

How do I force this string to wrap?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <STYLE type="text/css">
      table { 
	  	table-layout:fixed;
      }
	  
	  .hostName
	  {
	  	width:100px;
		border:solid 1px green;
   	 }
	 
	 .hostRow
	 {
	 	width:100px;
		border:solid 2px brown;
	 }
	 
    </STYLE>
  </HEAD>
  <BODY>
 
	<table>
	    <tr>
		<th class="hostName">Host name</th>
		</tr>
	
		<tr>
		<td class="hostRow">
			232.166.205-77.rev.gaoland.net 
		</td>
		</tr>
		
		<tr>
		<td class="hostRow">
			c-68-41-143-155.hsd1.mi.comcast.net  
		</td>
		</tr>
	
	
	</table>
 
  </BODY>
</HTML>

Open in new window

0
Comment
Question by:fischermx
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
  • 2
  • +1
11 Comments
 
LVL 6

Expert Comment

by:lpxtech
ID: 22858931
You can use the css property word-break: break-all;
0
 
LVL 1

Author Comment

by:fischermx
ID: 22858957
Nope, that doesn't work.
0
 
LVL 6

Expert Comment

by:lpxtech
ID: 22858968
Sorry, I failed to mention that this solution works only in IE. I'm don't think there is a firefox implementation of this yet.
0
Tutorial: Introduction to Managing a Linux Server

In this tutorial on systemd, we will explore:
-OS/Distro Adoption
-chkconfig and Other Legacy Commands
-Summary and Key Commands

 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22859288
You misunderstand tables.  They AUTOMATICALLY wrap text for you, they don't have to be micromanaged like DIV tableless layouts.  Remove ALL the styling of your tables above, especially the layout:fixed ; -- that is just asking for trouble.  When you put data into table cells, from whatever source, the table cells buffer in the browser to the "best fit" layout.  

You only have to specify a width=780  or whatever for the table, and if you need specific cells to be so wide and so high, state that too in the <TD width=xxx height=yyy>.   However, if you want the tables to correctly buffer the display in wrapping the long lines, the best way is to leave the TDs alone and just specify a fixed width for the table -- the browser will do all the work for you in the table proportions.
0
 
LVL 30

Expert Comment

by:Steggs
ID: 22859391
0
 
LVL 1

Author Comment

by:fischermx
ID: 22860138
scrathcyboy:
What are you talking about?
I need this table to be fixed layout, I need this column to specifically have that size.

Steggs:
Thanks for the javascript hint. I think there's no easy answer for this question.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22860164
"What are you talking about?"
I am trying to explain tables to you, are you listening?

"I need this table to be fixed layout, I need this column to specifically have that size."

If you have a table 800 width, with 4 cells 200 width, and you stuff more text into one cell than 200, it WILL wrap.  If you want to CHOP OFF the text going into any cell, then please don't use tables, they don't do it.

There is a REAL easy answer to this question if you re-read my comments above re how tables work.  And no, no one has EVER needed javascript to wrap the content of a table when you get tables out of DIVs.
0
 
LVL 1

Author Comment

by:fischermx
ID: 22860169
Explain me this again:

"If you have a table 800 width, with 4 cells 200 width, and you stuff more text into one cell than 200, it WILL wrap."

Then, why the in the sample I'm showing you it doesn't wrap?

Show me in my sample, what do I need to do, to let the table do its magic, according to you.
0
 
LVL 1

Author Comment

by:fischermx
ID: 22860171
Also, please understand than this is an example, the real table has more columns, and all were looking good, except of this table.

Also, please note, that IE DOES what I want. Just FF does not.
So, it is not about you teaching me about tables, really.
0
 
LVL 1

Author Comment

by:fischermx
ID: 22860186
Actually, you are the one who is not listening, or reading.

The issue I'm trying to solve here is why FF does not respect the specified column size I have in the style.

Then the fact issue about the text is being wrapped or not is really an additional issue.

0
 
LVL 30

Accepted Solution

by:
Steggs earned 2000 total points
ID: 22861205
@scrathcyboy : If you read the question, we are not talking about TEXT... we are talking about an UNBROKEN STRING.
 
The only solution is to break the string. Unfortunately the css property word-break: break-all; is not supported in all the browsers... so you have to use javascript.

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question