i am getting an issue when design email template in the SendGrid.
I used css inline, i want to subText max 3 line.enter image description here
Look good in the design, but when received email, 3 properties -webkit auto removed enter image description here
it only keep be 2 properties.
help me, thank you
I tested the following on Litmus:
<div style="width:300px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</div>
This worked only on Apple Mail, iPhones, and Samsung mail (Android).
You can use overflow:hidden with a max-height, and that will work with everything except MS Outlook Desktop (Windows). There is no fix for that, since it doesn't support overflow or max-height or anything (it supports a bit less than HTML4).
<div style="max-height:60px;overflow:hidden;width:300px;line-height:20px;">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</div>
What I've done here is calculated what the height of 3 lines would be (line-height of 20px * 3 = 60px), and used that as the height of a wrapping div.
Max-height is needed for Gmail iOS, which changes height:60px into height:auto.
Related
I'm trying to create a CSS theme for a blog (which I cannot change the HTML of). I want to make the entries go in columns (of which there is no set number), and have a horizontal slide to be able to slide through the posts; the columns will be the same size and they will be filled.
Unfortunately, after writing out the code, I have found a strange bug - when I use overflow: scroll, some columns somehow get cut off. I have made an example of this here - after several columns, with more entries to go, the text starts getting cut off, even where there's more left.
What I've noticed is that it is not dependent on the number of columns - if the width of the columns is smaller, there will be more columns. The cutoff point seems to be arbitrarily determined, but I have no idea why or how.
Is there a way to fix this? I've searched a lot for a solution, but all I've found are questions about disappearing scroll bars, not disappearing content.
So far, I have only seen this in Chrome. I have tested it on Internet Explorer, Firefox, and Safari, and it works on all of those three, but not Google Chrome. This seems to only happen in some versions of Chrome - a Chromebook user reported that the CSS was, indeed, working on his device.
div #entries{
height: 60vh;
column-width: 40vw;
overflow-x: scroll;
}
<div id="container to keep in">
<div id="entries">
<div class="entry">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia scelerisque mauris, sit amet rutrum est. Donec placerat, arcu in feugiat fringilla, justo neque bibendum odio, feugiat efficitur ex turpis in nulla. Proin cursus rutrum nunc eget egestas. Quisque interdum ultrices orci in posuere. Integer enim nunc, euismod tempor blandit eu, molestie vitae libero. Morbi erat dolor, congue non arcu et, iaculis dictum orci. Curabitur id tellus et eros rutrum luctus vitae sed velit. Integer vestibulum quam arcu, ut malesuada eros rutrum nec. Etiam ullamcorper ultrices libero, vel euismod mauris mollis vitae. Vivamus et nisl eget nulla euismod bibendum id sed augue. Vestibulum ultricies non felis sollicitudin elementum. Fusce sed diam aliquet est volutpat placerat vitae sit amet ante.
Anean eget egestas dui. Curabitur tristique ullamcorper augue, sit amet tristique nibh dapibus non. In ut sodales felis, et dictum diam. Cras ornare libero vitae quam laoreet, et rutrum purus luctus. Aenean tincidunt elit vel nibh facilisis euismod. In tempor erat tellus, in convallis nisi lacinia in. Etiam pulvinar finibus elit sit amet tincidunt. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ac fermentum nisl. Donec cursus purus at libero egestas volutpat. Nullam tincidunt lectus eu purus dignissim scelerisque.
</div>
<div class="entry">
Aliquam tempus nibh volutpat arcu semper pulvinar. Donec nec mauris nec metus dapibus auctor. Vestibulum eu tincidunt sem, sit amet auctor neque. Nulla ut enim diam. Donec est orci, pharetra id sapien eget, dictum blandit arcu. Suspendisse tempus consectetur aliquet. Donec eget consectetur enim, eu tincidunt diam. Morbi mi tellus, mattis eget velit ut, pretium scelerisque diam. Proin ut tortor hendrerit, elementum turpis sit amet, tempor mauris. Nunc semper ex quis augue vulputate, non molestie velit tincidunt. Maecenas faucibus augue dui, in condimentum lectus pellentesque eu.
</div>
<div class="entry">
Nulla eu ante nec lorem malesuada bibendum. Maecenas egestas mi et ornare mollis. Integer sed risus nulla. Aenean nunc nunc, pretium in elit vitae, semper maximus enim. Nulla dignissim vestibulum tellus sit amet fringilla. Nulla convallis, eros quis malesuada cursus, velit augue consequat eros, et tincidunt lacus mauris ut enim. Quisque facilisis magna facilisis eleifend maximus. In vel scelerisque turpis. Curabitur tempor libero diam, vitae pretium ex finibus sed.
Quisque dui justo, ultrices in velit in, vulputate sollicitudin turpis. Morbi sem velit, interdum a risus vitae, molestie sodales urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec in lacus sapien. Sed mattis maximus dui, vitae rhoncus sapien sodales sed. Ut malesuada, urna et varius varius, mauris neque viverra diam, ut rhoncus sem magna ut purus. Phasellus vestibulum aliquet elit tempor mattis. Phasellus venenatis, velit a tempus viverra, nisl arcu mattis nibh, a molestie lectus ligula vel lacus.
</div>
</div>
</div>
I am currently working on a personal webpage and wanted to know if there is a way to write CSS code to create a new line whenever text covers half the page. I googled a lot and only came up with pointless background tips and tricks (at least for this issue.) Any help would be appreciated. Thanks!
In it's simplest form:
<div style="width:50%;">
Content here....
</div>
http://jsfiddle.net/1y70e1ms/
By applying a width to the content's container, you can force the text to wrap at a certain point. Widths can be defined in absolute units, like pixels, but also in relative units, like percentages.
This does not technically insert a newline in the content. Inserting a literal "newline character" (\n) actually would not have a visual impact on the page, because all consecutive whitespace (newlines, tabs, spaces, etc.) in HTML is always condensed into a single space.
If you want to insert a break tag (<br>) at certain points in the HTML, you cannot do this with CSS. CSS is a set of presentation rules, not a method of modifying the HTML markup. JavaScript can modify the rendered DOM, which (while not technically modifying the markup directly), modifies the final rendered HTML that a browser loads.
If you want to modify all of the markup, you will need to do it manually before publishing, or write a script to modify all of the files as text before publishing.
p {
width: 50%;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum in turpis non egestas. Nunc feugiat fermentum mi, vel pulvinar libero condimentum vel. Ut nisi est, consectetur ut lectus nec, mattis interdum nibh. Etiam ut interdum est. Nulla
dictum ornare risus et scelerisque. In sodales a sem in aliquet. Donec at luctus orci, nec hendrerit tortor. Integer feugiat a metus ac sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ac
erat ut sem congue aliquet. Ut tellus ligula, fringilla vel egestas ut, facilisis posuere urna. Praesent condimentum ipsum et sapien pretium bibendum. Praesent feugiat sem lacus, ut ultricies quam convallis quis. Cras malesuada nunc in velit iaculis,
vel tincidunt purus aliquet. Etiam tempus metus quis vulputate placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent posuere, erat ut sollicitudin accumsan, dui dui dapibus arcu, a tincidunt
ex neque vel lacus. Vestibulum pulvinar felis sit amet justo ultrices interdum. Vestibulum ultrices urna nec purus consectetur porta. Vestibulum id cursus turpis, eget iaculis erat. Proin efficitur pulvinar velit. Maecenas vel odio urna. Donec suscipit
placerat varius. Donec sapien ante, interdum et mauris id, egestas posuere lectus. Sed mauris nunc, finibus sed magna ac, consequat efficitur erat. Etiam dignissim velit ante, at bibendum urna cursus sit amet. Nullam suscipit blandit nulla vitae auctor.
Proin in tellus nibh. Praesent pellentesque sem nisl, at semper felis cursus a. Nullam tempor varius enim. Suspendisse pharetra at lectus sit amet maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin elementum pellentesque mollis. Fusce commodo commodo urna, in euismod est ornare a. Integer dictum aliquet velit. Aliquam erat volutpat. Sed dictum ligula at elementum
placerat. Integer eget consequat turpis, a bibendum risus. Nulla facilisi. Ut ac malesuada eros, bibendum cursus leo. Fusce non lacinia erat. Aenean quis euismod nulla, nec auctor lectus. Integer varius, turpis et volutpat iaculis, lectus enim ullamcorper
libero, ut ullamcorper sem ligula in mi. Fusce elementum, dui ac posuere cursus, nunc felis lacinia mi, et egestas turpis tellus eu erat. Donec pulvinar nibh id massa tristique, et maximus velit efficitur. Nam ullamcorper, eros et mattis vestibulum,
diam ligula dapibus eros, id hendrerit eros lorem eget mauris. Nullam tincidunt sit amet mauris et tincidunt. Vivamus semper sem in hendrerit consequat. Aenean laoreet, justo non egestas tristique, ligula enim venenatis ex, sed lobortis magna risus
at nulla. Donec vulputate mi nec urna euismod, vel pellentesque lacus rutrum. Aliquam condimentum lacus risus, non faucibus nulla tempor in. Ut fermentum fringilla dignissim. In auctor, nisi ut convallis lobortis, risus magna convallis erat, sit amet
imperdiet sapien dui ac erat. Vestibulum congue ut lorem in auctor. Maecenas bibendum eros ut sem dictum finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur eu justo quis diam mollis pretium
gravida sed felis.
</p>
I've been practicing with columns lately and I just can't seem to get them right.
This is probably very simple to fix, but I'm pretty bad at web development at the moment. The highlighted section in the picture would obviously look better if it began at the top of the second column, how can I bump it over?
I never know exactly what code to post, so please tell me what you need to see and I'll edit it in as fast as I can.
Thank you for the help!
The break-inside: avoid-column on paragraphs should do the trick, but the browser support is not great. You can try also -webkit-column-break-inside:avoid and page-break-inside:avoid jsfiddle
Try this:
HTML:
<div class="test">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed turpis congue, dignissim nibh eu, ullamcorper neque. Etiam id mi cursus, pellentesque sapien at, volutpat ligula. Sed mattis dapibus dictum. Duis hendrerit ut est in rutrum. Suspendisse in nibh fringilla, congue erat non, euismod eros. Proin at elit ac dolor pharetra gravida quis in quam. Sed fringilla porta quam non tincidunt.
</p>
<p>
Phasellus eget purus et tellus lacinia faucibus non nec massa. Duis mattis vestibulum sagittis. Sed dapibus efficitur velit, vitae lobortis tortor cursus vel. Maecenas eu elementum enim. Nunc porttitor eleifend enim, sit amet dapibus enim hendrerit in. Quisque congue urna ut nulla placerat, ac pretium nisl elementum. Aliquam nec tristique diam. Quisque eget fringilla purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris orci arcu, porta sed ligula vitae, lobortis dignissim massa. Aliquam suscipit finibus augue non tincidunt. Aenean fringilla nulla eget urna ultricies, in imperdiet orci mollis. Pellentesque sit amet mattis ligula, vitae laoreet ex. Mauris molestie sodales condimentum. Vestibulum tortor dolor, scelerisque non molestie nec, mollis eget sapien. Suspendisse commodo magna a est elementum, a faucibus nisl sagittis.
</p>
<p>
Proin facilisis non turpis a consequat. Duis a mi dapibus, tempor velit condimentum, aliquet quam. Ut ut sapien vestibulum orci egestas facilisis. In hac habitasse platea dictumst. Etiam porttitor libero mattis justo finibus, a mattis erat ullamcorper. Donec et ultrices metus, vestibulum dictum est. Sed bibendum sodales egestas. Duis molestie libero at tortor sagittis, sed pellentesque dolor gravida. Pellentesque metus ipsum, varius at gravida ac, maximus id urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Morbi gravida imperdiet mauris, id dictum quam congue in. Integer purus justo, pellentesque vestibulum euismod in, finibus ut neque. Sed imperdiet iaculis blandit. Mauris gravida, nibh quis placerat fringilla, nisl nibh tincidunt neque, et tincidunt dolor ex rutrum quam. In non tellus arcu. Sed feugiat nibh ac lectus volutpat, sed varius augue lobortis. Nullam velit magna, laoreet id egestas vitae, luctus et leo. Fusce ultricies dolor blandit nibh pulvinar, vel maximus augue rhoncus. Curabitur posuere, libero nec mollis eleifend, orci sapien sodales mi, non fringilla sem ligula non leo.
</p>
<p>
Maecenas id lobortis nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce mattis tortor ut enim laoreet, blandit dignissim augue sodales. Duis a est diam. Phasellus lobortis aliquam tellus. Sed sit amet elit pulvinar, volutpat dui sit amet, tempus dolor. Nam quis feugiat metus. Quisque dictum dui at sapien pulvinar tincidunt. Aliquam at ornare diam. Nam interdum lobortis urna ac aliquet. Integer in sollicitudin metus. Sed rutrum, dolor non venenatis malesuada, velit enim pulvinar dui, ac sagittis massa ante et arcu. Nullam arcu odio, varius porttitor aliquam congue, lobortis at nibh.
</p>
</div>
CSS:
.test {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
.test p{display:inline-block}
Here you can see how text breaks ONLY in paragraphs and nothing else. No need for dirty hacks, br or stuff like that. See fiddle
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have a html table which is going out of page border if the table body conent is large.
When I set the width to 100% , still it is not fitting into the screen.
How to make the table to fit to screen.
<table width="100%">
The above code is not working if table body is large than the screen size
Don't put content in the cells which can't word wrap sufficiently to allow all the cells to be narrow enough for the table to fit in the space allocated to it.
You should probably set the table layout to fixed in CSS.
Take a look at this jsfiddle.
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget tempor ligula, non ultricies lacus. Cras sed sapien nec tortor porttitor ornare quis et erat. Nunc molestie sodales sem, in volutpat leo ultrices sed. Ut vel orci magna. Nulla vitae mi venenatis, auctor nulla et, rutrum nibh. Phasellus sollicitudin, purus vitae mollis pretium, nibh leo ullamcorper ligula, vel porta libero metus nec mauris. Pellentesque quis tellus dui. Duis id justo libero. Fusce sagittis, metus ut vestibulum ullamcorper, ligula urna vulputate ipsum, vel condimentum orci enim nec nulla. Fusce viverra metus at porta suscipit. Praesent suscipit blandit cursus. Nulla dignissim sodales posuere. Etiam posuere porta sem.
Donec commodo ut est sit amet blandit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse non felis id nunc bibendum consequat ut quis orci. Ut mattis purus mi, quis dictum risus sollicitudin at. Pellentesque eu molestie metus. Donec aliquet nulla tellus, non rhoncus velit convallis imperdiet. Nam vitae ullamcorper nisi, ut condimentum eros.
Etiam mollis, augue quis suscipit cursus, mauris risus mollis tellus, sit amet tincidunt augue eros sed erat. Fusce mattis erat nec est molestie, at sodales nisl posuere. Nam quis tellus nisi. Proin pharetra sapien nec blandit sollicitudin. Donec et leo egestas, accumsan eros non, scelerisque magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi porta molestie diam, id mattis nisl suscipit sit amet. Suspendisse iaculis erat vel venenatis eleifend. Ut ipsum urna, vulputate vitae lacus vitae, aliquam adipiscing nisi. Sed molestie bibendum pretium. Morbi vel rutrum nulla, nec luctus elit. Nunc interdum aliquet adipiscing. Nam purus nisl, mollis nec porttitor et, mattis ut ipsum. Aliquam fermentum tristique tellus, aliquam mollis est pulvinar non. Nam cursus risus orci, non euismod nisl vestibulum pretium.
Nulla eleifend lacus eu eleifend consequat. Morbi dapibus diam in laoreet ullamcorper. Nulla commodo quam nisl, lacinia adipiscing purus mollis et. Ut eleifend aliquam felis sollicitudin congue. Nam facilisis lacus erat, a consequat eros laoreet nec. Mauris consequat sodales nulla sed accumsan. Maecenas condimentum ullamcorper felis, non aliquam lorem interdum vel. Nulla facilisi. In vehicula eros sit amet nulla lacinia malesuada eget sed neque. Sed ante mauris, ultrices vel tempus sit amet, aliquet in enim.
Fusce ultrices dui enim, id aliquam diam placerat non. Donec volutpat interdum nisl et rutrum. In vulputate porttitor nunc ac luctus. Mauris non vulputate nibh. Etiam ut lorem quis sem semper ultrices. Sed varius nunc ac eleifend hendrerit. Nam in vehicula nunc. Nulla ac diam ac magna malesuada facilisis in lobortis lacus. Cras cursus nec erat eget cursus. Maecenas ac mauris non augue vehicula porta et viverra sapien. Suspendisse consequat eu sapien vel sollicitudin. Morbi mollis sollicitudin hendrerit. Donec eu cursus mauris.</td>
</tr>
</table>
CSS:
table {
width: 100%;
table-layout: fixed;
}
td {
white-space: nowrap;
overflow: hidden;
}
As you can see, the cell contains a lot of text that I prevented from wrapping. The table is set to 100% width but without fixed layout, it still take as much width as it needs to fit its largest cell.
With fixed layout, it will remain 100% wide, whatever happens within its cells.
Try to comment and uncomment the following line in the stylesheet declaration, to witness the difference :
table-layout: fixed;
I'd like to use image captions and since the figure tag is not supported in IE8 or below, I thought a <div> containing <img> and a caption would help out.
However, when my caption is wider than my <img>, the containing <div> width expands to the caption width. This causes ugly whitespace next to the <img>. Instead I'd like the caption to break over lines.
I could manually set the <div> width equal to the <img> width. Or manually insert a <br /> in the caption where needed. But I was hoping there would be a more elegant solution.
For an example, please see this jsfiddle
Working Fiddle: http://jsfiddle.net/uNDRx/3/
CSS:
div.rimg {
display:table;
width:1px;
float:right;
border:1px solid #aaa;
border-radius:5px;
overflow:hidden;
margin:10px;
}
div.rimg img {
}
div.rimg span {
margin:10px;
}
HTML:
<body>
<h2>Pellentesque habitant morbi tristique senectus et netus</h2>
<div class="wrapper">
<div class='rimg'>
<img src='https://dl.dropboxusercontent.com/u/116120595/tree_1_200_200.jpg' alt=''><span>What an exceptionally beautiful tree</span>
</div>et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</div>
</div>
</body>