I am not able to find word-wrap in my CSS templates. What could be the reason for there being no word wrap? And how would I go about fixing this?
You can use word-wrap on td elements. I'm guessing you are using software that waits for you to type option and then lets you select from the options.
You can see the working example below, or see this answer for more information. The important part below is table-layout: fixed along with the word-wrap on the td element.
Working Example
td {
border: 1px solid;
}
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table>
Related
I am using below code in my project for wrapping the text but the text is still overflowing to the next text box. I also tried using word-wrap:break-all but it did not work. I am using Chrome to test my code.
Can anyone suggest what should I use to wrap text in this scenario?
Code:
<td style="word-wrap:break-word" <%if((sv.ownername).getClass().getSimpleName().equals("ZonedDecimalData")) {%>align="right"<% }else {%> align="left" <%}%> ><%=smartHF.getHTMLOutputFieldSFL(sv.ownername, "ownername", 0)%></td>
add this one
word-break: break-all;
white-space:normal;
You can use this html
<table width="100" border="1" style="table-layout:fixed">
<tr>
<td><div style="word-wrap:break-word"> 23232323232323232323232323232323232323232323232323</div></td>
<td>abcabc</td>
</tr>
</table>
You should give width to the text holder so that word-wrap will work
p.test {
width: 100px;
border: 1px solid #000000;
word-wrap: break-word;
}
<table>
<tr>
<td>
<p class="test"> I am using below code in my project for wrapping the text but the text is still overflowing to the next text box. I also tried using word-wrap:break-all but it did not work. I am using Chrome to test my code.</p>
</td>
</tr>
</table>
I had struggled with a similar issue for a while and finally realized that a parent container's height was limited and its overflow property was set to hidden.
After allowing the parent to be taller I finally was able to see the text.
Hope this helps
I have this code :
<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
<tbody>
<tr valign="top">
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
This is my text that I need in 2 lines
</td>
</tr>
<tr valign="top">
<td style="font-size:12px;line-height:14px">
Second Line
</td>
</tr>
</tbody>
</table>
As you can see, the first tr/td should be height 60px (min-height:60px) but in fact it isn't.
For many reasons, I can't use height directly (this code is formatted trought back office system, in a newsletter).
So, how can I take the whole height on the td trought min-height?
Also, tried putting min-height:60px; on tr, but nothing change...
min-height doesn't work for table elements:
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
I can only assume this applies to td and tr as well.
What should always work is wrapping the content in a div, and applying min-height to that, as shown in this JSFiddle:
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
<div style="min-height: 60px; background-color: green">
This is my text that I need in 2 lines
</div>
</td>
Edit: You say this doesn't work with Outlook.
Alternative idea: Place a 60 px tall image in the td, and make it float: left:
<td>
<img src="..." style="float: left">
</td>
Use <td height="60"> not CSS height or min-height
For HTML email set your table cell as <td height="60"> and it will treat that as the min-height. If your content is more than 60px, it will expand accordingly.
Put a DIV in the cell, style the DIV instead.
Min-height doesn't works on tables.
It is sometimes useful to constrain the height of elements to a certain range. Two properties offer this functionality: min-height & max-height
But these can't be used on non-replaced inline elements, table columns, and column groups.
You can't set min-height and min-width, but you can use some CSS3 for achievements this same effect.
.default-table table {
border-collapse: collapse;
}
.default-table table td {
padding: 0;
}
.default-table tr:before {
width: 0px;
content: '';
float: left;
overflow: hidden;
height: 28px;
font-size: 0;
}
.default-table {
overflow: hidden;
}
<div class="default-table">
<table>
<tbody>
<tr>
<td>Steve</td>
<td>Smith</td>
<td>stevesmith#gmail.com</td>
</tr>
<tr>
<td>Jone</td>
<td>Polanski</td>
<td>jonep#gmail.com</td>
</tr>
</tbody>
</table>
</div>
but if u having collapse or padding in td. You must give for .default-table table minus margin-left.
HTML :
<table></table>
CSS :
table{
height:0px; /*Set any facultative length value to Height (percentage value doesn't work)*/
min-height:100vh;
}
That's how I always resolve this problem ...
Add display block
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;display:block;">
Here's a solution that works in Outlook (tested) and other e-mail clients:
<td style="mso-line-height-rule:exactly;line-height:300px;"> </td>
This is cleaner than using an image, which could negatively affect your spam score, and does the exact same thing.
If you have other content in the <td> that you don't want to have that line height, you can just wrap the non-breaking space in a <span> and set the line-height on that tag:
<td><span style="mso-line-height-rule:exactly;line-height:300px"> </span>**Other content without 300px line-height here**</td>
The reason height or min-height works on <div> tags and not <td> is because <td> are set to display:table-cell and do not respect height the same way that display:block (<div>) elements do.
I have resolved this issue by adding display:block; to its style as
<td style="display:block; min-height:200px;">
min-height does not work in td, Set height that will work like min-height and automatic increase height if needed. That is worked for me
Here is a solution that does not depend on the height in pixels. It works in all email clients:
<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
<tbody>
<tr valign="top">
<td style="font-family:Arial;font-size:12px;line-height:14px;">
This is my text that I need in 2 lines
</td>
<td style="font-family:Arial;font-size:12px;line-height:14px;">
<br/><br/>
</td>
</tr>
<tr valign="top">
<td style="font-size:12px;line-height:14px">
Second Line
</td>
</tr>
</tbody>
The solution works by adding a zero-width column with two lines to the right of the first one. It uses the character, which is a non-breaking zero-width space.
It may be reviving a 2012 post, for those who searched and found this post like me:
Note: Check these addresses for the email client support before using this method, at the time of writing this answer, the support was around 50% -ish.
E-mail client support range of :first-child
E-mail client support range of ::before
table tr:first-child td:before {
min-height: 100px;
display: block;
content: ""
}
<table border="1">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
What I found !!!, In tables CSS td{height:60px;} works same as CSS td{height:60px;}
I need to create a chat layout that uses all the available space and scales nicely, but has few fixed sizes.
Here's the structure:
<table style="width: 100%; height: 100%">
<tr>
<td></td>
<td style="width: 200px; background: red;"></td>
</tr>
<tr>
<td style="height: 100px; background: blue"></td>
<td></td>
</tr>
</table>
However, I want to place a lot of content in the first table cell and I want it to scroll, so it won't expand the table.
Is it possible to make it overflow properly, without having a fixed height for the cell? Simply adding overflow: auto doesn't seem to work.
PS. I hate tables, but can't figure out a very clean and cross-browser way to do a layout like this with divs and css. If someone can come up with one, I'll gladly use it.
One way to achieve is use put all content in div element and set div overflow property to auto
<table style="width: 100%; height: 100%">
<tr>
<td>
<div style="overflow:auto;">
//your contain
</div>
</td>
<td style="width: 200px; background: red;"></td>
</tr>
<tr>
<td style="height: 100px; background: blue"></td>
<td></td>
</tr>
</table>
An alternative if your content shouldn't actually even be in a table is to use a CSS grid system, such as 960.gs or Nicole Sullivan's "OO-CSS".
You'd want to divide a container into however many grids you needed and these lend themselves much better to CSS decoration. They're much more flexible and simple to use.
I use Drupal 6 with theme summertime. Also I use FCKeditor. In order to align content I wanted to create a table with invisible borders. First I tried FCKEditor table properties and I gave 0 to border size in order to make borders invisible. But it did not work. I looked up the source and non working code was like below (Why giving border="0" did not work?) :
<table width="468" cellspacing="0" cellpadding="0" border="0" style="width: 468px; height: 201px;">
<tbody>
<tr>
<td>
<h2 class="rtecenter"><strong>Content </strong></h2>
</td>
<td><img src="/sites/mydomain.com/files/sample.jpg" alt="" /></td>
</tr>
</tbody>
</table>
Then I tried:
<table width="468" cellspacing="0" cellpadding="0" style="border: medium hidden ; width: 468px; height: 201px;">
Table borders are now invisible but cell borders are still visible. How can I make it totally invisible. Thanks.
The border attribute should be specified on the cell level, eg <td style="border: 0;">. Of course, this should be made in CSS using:
table td { border: 0; }
But I see that in your case that might be difficult.
It should be done like this:
<table width="468" cellspacing="0" cellpadding="0" border="0" style="width: 468px; height: 201px;">
<tbody>
<tr>
<td style="border: 0">
<h2 class="rtecenter"><strong>Content </strong></h2>
</td>
<td style="border: 0"><img src="/sites/mydomain.com/files/sample.jpg" alt="" /></td>
</tr>
</tbody>
There are probably borders set in the CSS. Drupal core's system.css sets some borders on table headers and body that can be a pain to override.
You can add a custom CSS file to the theme so you avoid editing its CSS directly. Simply add the path to your added .css file in the theme's .info file.
Then try adding:
tbody,
thead,
thead th,
tr.even,
tr.odd {
border: 0;
}
Don't forget to turn off CSS aggregation and clear your cache.
I just happened upon this while searching for something else. This is old, but thought I'd comment anyway. Someone else might find it helpful.
Rather than do a few of the things mentioned above, it would be simpler to just add a specific ID or CLASS name to the table itself, then you could specify settings just for that table in the CSS.
HTML:
<table .... id="exampleclass">
CSS:
#exampleclass tbody,
#exampleclass thead,
#exampleclass th {
border: 0;
}
I have a table which is built with the contents coming from a returned dataset. What I want to do is stop a 'description' cell from expanding over 280px wide, no matter what the content length (its s string). I have tried:
<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" width="280px" >
But this doesn't seem to work. I don't want it to wrap, nor do I want anything over 280px to be displayed.
It appears that your HTML syntax is incorrect for the table cell. Before you try the other idea below, confirm if this works or not... You can also try adding this to your table itself: table-layout:fixed.. .
<td style="overflow: hidden; width: 280px; text-align: left; valign: top; whitespace: nowrap;">
[content]
</td>
New HTML
<td>
<div class="MyClass"">
[content]
</div>
</td>
CSS Class:
.MyClass{
height: 280px;
width: 456px;
overflow: hidden;
white-space: nowrap;
}
<table border="1" width="183" style='table-layout:fixed'>
<col width="67">
<col width="75">
<col width="41">
<tr>
<td>First Column</td>
<td>Second Column</td>
<td>Third Column</td>
</tr>
<tr>
<td>Row 1</td>
<td>Text</td>
<td align="right">1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Abcdefg</td>
<td align="right">123</td>
</tr>
<tr>
<td>Row 3</td>
<td>Abcdefghijklmnop</td>
<td align="right">123456</td>
</tr>
</table>
I know it's old school, but give that a try, it works.
may also want to add this:
<style>
td {overflow:hidden;}
</style>
Of course, you'd put this in a separate linked stylesheet, and not inline... wouldn't you ;)
To post Chris Dutrow's comment here as answer:
style="table-layout:fixed;"
in the style of the table itself is what worked for me. Thanks Chris!
Full example:
<table width="55" height="55" border="0" cellspacing="0" cellpadding="0" style="border-radius:50%; border:0px solid #000000;table-layout:fixed" align="center" bgcolor="#152b47">
<tbody>
<td style="color:#ffffff;font-family:TW-Averta-Regular,Averta,Helvetica,Arial;font-size:11px;overflow:hidden;width:55px;text-align:center;valign:top;whitespace:nowrap;">
Your table content here
</td>
</tbody>
</table>
Try the following css to stop expanding the table and it's cells.
table {
table-layout: fixed;
width: 100%;
}
th, td {
word-wrap: break-word;
}
table-layout: fixed will make your table fixed. But still the columns / cells will overlow or expand. To fix that issue use word-wrap: break-word
No javascript, just CSS. Works fine!
.no-break-out {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
This could be useful. Like another answer it is just CSS.
td {
word-wrap: break-word;
}
Simply set the max-width attribute to 280px like this:
<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" max-width="280px" width="280px">
This will solve your problem.
It's entirely possible if your code has enough relative logic to work with.
Simply use the viewport units though for some the math may be a bit more complicated. I used this to prevent list items from bloating certain table columns with much longer text.
ol {max-width: 10vw; padding: 0; overflow: hidden;}
Apparently max-width on colgroup elements do not work which is pretty lame to be dependent entirely on child elements to control something on the parent.
I've tested these solutions, and I suspect that word-wrap: break-word does not work on URLs. I could get a URL with spaces to break on a space, but the cells still expand despite fixed layout.