PDA

Click to See Complete Forum and Search --> : dumb question about tables...

patimages
10-16-2007, 06:17 PM
Hi,
I have a stupid question :o ... On one of my php page, there is a table whose width is defined (160 px). In one of the case of this table, I have a big word (blabla_bla_blaaaaaaaaa). This word is too big for the 160 px. I need this word and cannot change neither the width of the column nor the word itself (for technical reasons) . Is there a way through the table definition (some style or css property I do not know) to break the word in 2 lines ? So far, it is too big an mess up my table....
sounds dumb for a question but could not figure a way since the word does not have any space... any help would be really nice of you guys !!!

thanks a lot !!!!
ray326
10-16-2007, 09:56 PM
There's no way to arbitrarily break a word. You can try hidden or auto overflows to see if either is satisfactory.
willyp
10-17-2007, 01:10 AM
I have run into this before.

Try putting a <span> around the long text, and give that span a width using css.

Experiment by:

<td><span style="width:50px">superlongtextthatdoesnothaveabreak</span></td>


In my latest test this did NOT work, It did seem to work when I was in the middle of a project a while ago, although perhaps it had at least one break.
king8358
10-17-2007, 02:18 AM
CSS
-------------------------------------------------------------

.clsTable{
width: 180px;
border: #999999 1px solid;
padding: 3px;
}

.clsTd{
width: 160px;
border: #999999 1px solid;
}

.clsWordBreak{
width: 160px;
word-break: break-all;
}

HTML
-------------------------------------------------------------

<table class="clsTable">
<tr>
<td class="clsTd"><div class="clsWordBreak">hello_world_hello_world_hello_world</div></td>
<td class="clsTd"><div class="clsWordBreak">hello_world_hello_world_hello_world</div></td>
</tr>
<tr>
<td class="clsTd"><div class="clsWordBreak">hello_world_hello_world_hello_world</div></td>
<td class="clsTd"><div class="clsWordBreak">hello_world_hello_world_hello_world</div></td>
</tr>
</table>


TEST:
-----------------------------------------------------------------
WORK IN IE7 (SO EASY? MS IS GOOD, I LIKE IT.)
NOT WORK IN OPERA ("DISPLAY + OVERFLOW + POSITION" CAN BE WORK, TESTED)
MOZILA? MAYBE WORK ,NOT TEST

CHINESE ENGLISH, ^_^
king8358
10-17-2007, 02:25 AM
CSS:
-------------------------------------------------------
.clsTable{
width: 180px;
border: #999999 1px solid;
padding: 3px;
}

.clsTd{
width: 160px;
border: #999999 1px solid;
}

.clsText0{
display: block;
width: 160px;
overflow: hidden;
}

.clsText1{
display: block;
width: 160px;
}

.clsText2{
display: block;
width: 160px;
position: relative;
left: -160px;
}

HTML
-----------------------------------------------------------
<table class="clsTable">
<tr>
<td class="clsTd">
<div id="text0" class="clsText0">
<div id="text1" class="clsText1">hello_world_hello_world_hello_world</div>
<div id="text2" class="clsText2">hello_world_hello_world_hello_world</div>
</div>
</td>
</tr>
</table>

END
-----------------------------------------------------------
YOU HAVE A 'STUPID' QUESTION, AND I HAVE A STUPID SOLUTION.
^_^
WebJoel
10-18-2007, 01:15 PM
Or make the lengthy word in a "<span>", make it 'display:none;" until hovered-over, then it pops-up absolutely-positioned as a 'tool tip', thus, not breaking your design yet revealing the desired word..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
a:link {color:#212121;}
a:visited {color:#008080;}
a:hover {color:#FF0000;}
a:active {color:#000000;}
/* above: controls colors of links */

.buttons a {color:#000000; background-color:white; display:block;
font:13px arial, sans-serif; font-weight: bold; text-decoration:none;
margin-top:3px}
/* Above: controls how 'buttons' anchors behave */

.buttons a:hover {background-color:#ffffff; font:13px verdana;
font-weight: bold; text-decoration:none;}
/* Above: controls how 'buttons anchor on-hover' behave */

#menu {position:relative; width:160px; height:auto;
text-align: center; padding:10px 0 10px 0; border:1px double silver;}
/* Above: the actual "menu", a list of links */

#menu a span {display:none;}
/* Above: how the "<span>text la-la-la text</span>" is handled */

#menu a:hover span {display:block; position:absolute; top:195px; left:10px;
width: 125px; z-index: 100;color:black;background-color:#fff99d; padding:10px;
font:1em Verdana, sans-serif; border:1px solid black;
/* Above: how the <span>text la-la-la text</span> is handled when
hovering over the visible link-text (the 'pop-up') */
}
</style>


<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>

<div id="menu" class="buttons">
<div id="menu">
<a href="#">Name of song from<br /> "Mary Poppins"...<span>Supercalifragilisticexpialidocious</span></a>
<a href="#">The McDonald's<br />tv jingle...<span>Twoallbeefpattiesspecialsaucelettucecheesepicklesonionsonasesameseedbun</span></a>
<a href="#">Longest<br /> non-tech word in<br />most dictionaries...<span>floccinaucinihilipilification </span></a>
<a href="#">Longest officially recognized<br /> place name...<span>Taumatawhakatangihangakoauauotamateapokaiwhenuakitanatahu</span></a>
</div>
</div>

</body>
</html>