I want to make text like this:
Look like this:
texttext: textttt
ttttttttttt: ttt215555
textt: trtrtrt
But when I try, it looks like this:
texttext: textttt
ttttttttttt: ttt215555
textt: trtrtrt
My code that i'm currently using:
<div class="aligncenter" style="width: 700px; height: 1px; border-top: 1px dotted #999999; font-size: 0;">-</div>
Hours: Mon - Sun: 3:00 pm - 6:00 am Phone: 777777777777 Address: asd str. #14
<div class="aligncenter" style="width: 700px; height: 1px; border-top: 1px dotted #999999; font-size: 0;">-</div>
I've solved it like this (wordpress):
http://jsfiddle.net/SEcfh/
<table border="0" align="left">
<tbody>
<tr>
<td style="width: 80px;">Phone:</td>
<td>+999 999 999 999</td>
</tr>
<tr>
<td style="width: 80px;">Phone:</td>
<td>+999 999 999 999</td>
</tr>
<tr>
<td style="width: 80px;">Phone:</td>
<td>+999 999 999 999</td>
</tr>
</tbody>
</table>
You can use white-space: pre or white-space: pre-wrap to preserve spaces in your text. You could also use a layout with <table>s for tabular data, or a definition list <dl> / <dt> / <dd> setup with fixed width terms.
You probably don't want to use white-space: pre because you'll manually have to add the right amount of spaces to your text.
Using spans with a certain width, wrapped in a div with width 2x, you can easily achieve this. See here: http://jsfiddle.net/qaTDN/
This is tabular data, so why not put it in a <table>?
TO break a line or word after certain width you can use this CSS tag:
word-wrap: break-word;
Related
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>
We have a items lined up in a table with no borders or padding. Each first row contains a graphic and the row immediately below is either blank or contains an anchor link to a disclaimer. The link should be closer to the graphic directly above it, but there's still a big gap.
What can I do to format the table so that the graphics and the disclaimer link can be closer?
This is the link to the page I'm working on: http://edenred.jp/for-beneficiaries/for-current-beneficiaries/main-affiliates-list.aspx
Here is a sample of the code: (this was taken from the third row from the bottom)
<tr>
<td>
<span style="font-size: 14px;"><img alt="てんや" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo35-(1).gif.aspx" style="width: 160px; height: 48px;" title="てんや" /></span></td>
<td>
<span style="font-size: 14px;"><img alt="とりかく" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo36-(1).gif.aspx" style="width: 160px; height: 48px;" title="とりかく" /></span></td>
<td>
<span style="font-size: 14px;"><img alt="とんかつがんこ" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo37-(1).gif.aspx" style="width: 160px; height: 48px;" title="とんかつがんこ" /></span></td>
<td>
<span style="font-size: 14px;"><img alt="とんかつ浜勝" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo38-(1).gif.aspx" style="width: 160px; height: 48px;" title="とんかつ浜勝" /></span></td>
</tr>
<tr>
<td style="text-align: right; vertical-align: top;">
<span style="font-size:14px;">※1</span></td>
<td style="text-align: right; vertical-align: top;">
<span style="font-size:14px;">※1</span></td>
<td>
</td>
<td>
</td>
</tr>
You have padding set to 10px:
.cpMain td {
vertical-align: top;
padding: 10px; // play with it, change to padding: 0px for the beginning
width: 220px;
}
remove it and it will look good.
Or you can create a css class below the .cpMain td class:
.table-no-padding td {
padding: 0px;
}
and add this class to the list of css classes in your html:
<table class="table-no-padding">
<!-- td content -->
</table>
This is generally caused when you do not define cellspacing=0 and cellpadding=0 while writing table tag. Please check for it.
In your code, I can see that you have applied 10px padding to the class .cpMain td
And 5px right padding is applied to .fruitboxDeliveryForm table.customer td, .simpleForm td
Removing or setting them to 0 these may help you achieve it.
Browsers have a default display for every element. You can uses a tool like firebug for firfox to inspect elements and see what they are for yourself. If you do not explicitly set the style the default will be used.
Using a tool like firebug will also show you where applied styles are coming from
Use CSS to set the style as required. :Set cellpadding and cellspacing in CSS?
In each td of the anchore, set padding-top to 0
padding-top="0px"
eg
<td style="text-align: right; vertical-align: top;padding-top:0px;">
<span style="font-size: 14px;">※8</span></td>
hope it helps :)
I have search around regarding this whitespace area while coding with html. But I still cannot resolve mine. My problem is that there is always a whitespace after the image of abclogo no matter what i change in the table style. I would like to see the image unseparated from the next line which shows 31 July 2012
<table style="vertical-align: bottom; background-color: rgb(0, 136, 64); width: 100%;">
<tbody>
<tr>
<img style="border: 0; width:>800px;"alt="Logo of abc" src="abclogo.jpg">
</tr>
<tr>
<td style="text-align: right; padding-right: 15px;">31 July 2012</td>
</tr>
</tbody>
</table>
Add cellspacing=0 cellpadding=0 to the table tag. Or use border-collapse: collapse;.
Also add display: block; to the image.
Simply float the image to the left: jsFiddle example.
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 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.