I have a hard time finding out why my html+css looks fine in a browser and in the mailchimp preview function but looks ugly in the inbox of outlook.
Are there some things that cant be done in a html outlook email?
Here's the source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scandia Housing</title>
<style type="text/css">
body {
background:#eeeeee;
margin:0; padding:0;
}
a {
color:#2f894d;
text-decoration:none;
}
h2 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
color:#2d4760;
font-weight:lighter;
}
h3 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:15px;
color:#2d4760;
font-weight:lighter;
}
#headtext {
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
color:#9aaec2;
text-align:center;
width:720px; display:block;
clear:both; margin:auto;
margin-bottom:10px;
}
#content {
display:block;
margin:auto;
background:#fff;
width:720px;
}
#rowbox1 {
padding:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:11px;
margin-top:30px;
width:720px; height:250px;
display:block;
}
#rowbox2, #rowbox3, #rowbox4 {
padding:0;
font-family:Tahoma, Geneva, sans-serif;
font-size:11px;
margin-top:20px;
width:720px; height:210px;
display:block;
}
#rowbox1 {
background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/rowboxbg.png) no-repeat bottom;
}
#a1 img, #c1 img, #d1 img, #e1 img {
margin-right:10px;
margin-bottom:10px;
}
#b1 img {
margin-left:10px;
}
#a1, #b1, #c1, #d1, #e1 {
color:#606060;
width:350px; height:240px;
display:block;
float:left;
margin-left:30px;
}
#b1, #c1, #d1, #e1 {
background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/boxbg.png) bottom;
width:380px; height:170px;
padding:10px;
}
#a1 h2, #b1 h3, #c1 h3, #d1 h3, #e1 h3 {
margin:0; padding:0;
}
#a2 h2, #b2 h3, #c2 h3, #d2 h3, #e2 h3 {
margin:0; padding:0;
}
#a2, #b2, #c2, #d2, #e2 {
font-family:Tahoma, Geneva, sans-serif;
font-size:11px;
color:#2d4760;
width:230px;
height:190px;
display:block;
float:left;
margin-left:20px;
}
#a2, #b2, #c2, #d2, #e2 {
background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/line.png) bottom no-repeat ;
}
#a2 {
background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/listbox.png) no-repeat;
width:260px; height:220px;
margin-left:70px;
}
#b1 {
height:210px;
}
#b2 {
width:268px; height:210px;
}
#a2 h3 {
margin:5px 0 0 10px; padding:0;
}
#a2 ul {
margin:0; padding:0;
margin:20px 0 0 30px;
}
#a2 h3 {
color:#fff;
}
#footer {
text-align:center;
font-size:10px;
font-family:Tahoma, Geneva, sans-serif;
background:url(http://www.scandiahousing.com/DND/nyhedsbrev/images/footer.png);
color:#fff;
padding:20px;
}
</style>
</head>
<body>
<div id="headtext"><a href="*|ARCHIVE|*">Hvis du modtager denne email, er du blevet tilmeldt Scandia Housings nyhedsbrev.<br />
Har du problemer med at få vist dete nyhedsbrev, så klik her og få det vist i din browser.</a></div>
<div id="content"><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/header.png" width="720" height="137" />
<div id="rowbox1">
<div id="a1">
<h2>Velkommen til vores nyhedsbrev </h2>
<p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/peter.gif" width="119" height="176" align="left" />Lorem ipsum dolor sit amet, consectetur adipisc ing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. </p>
<p>Quisque leo tellus, eleifend vel scelerisque rhonc us, viverra a risus. <img style="margin-top:20px;" src="http://www.scandiahousing.com/DND/nyhedsbrev/images/petersign.png" width="112" height="50" /><br />
</p>
</div>
<div id="a2">
<h3>Nyt fra Scandia Housing </h3>
<ul>
<li>Lejemarkedet om 5 år</li>
<li>Regeringen vil lokke udenlandsk talent til Danmark</li>
<li>Århus Universitet kommenterer regerings-planerne</li>
<li>Fokus på boligen</li>
<li>Scandia Housing vokser</li>
<li>Travl periode i udsigt</li>
<li>Lektor Morten Skak's antagelser</li>
</ul>
</div>
</div>
<div id="rowbox2">
<div id="b1">
<h3><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/person1.gif" width="118" height="178" align="right" />Århus Universitet kommenterer <br />
regeringsplanerne</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. Quisque leo tellus.</p>
<p>>> Læs yderligere her</p>
</div>
<div id="b2">
<img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/pictures.png" width="268" height="210" />
</div>
</div>
<div id="rowbox3">
<div id="c1">
<h3>Fokus på boligen</h3>
<p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/house.gif" width="138" height="83" align="left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. </p>
<p> Quisque leo tellus, eleifend vel scelerisque rhoncus, viverra a risus. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu.</p>
<p>>> Læs yderligere her</p>
</div>
<div id="c2">
<h3>Travl periode i udsigt</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. </p>
<p>Nunc molestie ultrices rutrum. Quisque leo tellus, eleifend vel scelerisque rhoncus.</p>
<p>>> Læs yderligere her</p>
</div>
</div>
<div id="rowbox3">
<div id="c1">
<h3>Scandia Housing vokser</h3>
<p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/house2.gif" width="102" height="136" align="left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. </p>
<p>Quisque leo tellus, eleifend vel scelerisque rhoncus, viverra a risus. </p>
<p>>> Læs yderligere her</p>
</div>
<div id="c2">
<h3>HR chefens top 5 liste</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. </p>
<p>Nunc molestie ultrices rutrum. Quisque leo tellus, eleifend vel scelerisque rhoncus.</p>
<p>>> Læs yderligere her</p>
</div>
</div>
<div id="rowbox3">
<div id="c1">
<h3>Lektor Morten Skak's antagelser</h3>
<p><img src="http://www.scandiahousing.com/DND/nyhedsbrev/images/house2.gif" width="102" height="136" align="left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. Nunc molestie ultrices rutrum. </p>
<p>Quisque leo tellus, eleifend vel scelerisque rhoncus, viverra a risus. </p>
<p>>> Læs yderligere her</p>
</div>
<div id="c2">
<h3>Lejemarkedet om 5 år</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue, sem quis eleifend aliquam, orci leo vestibulum enim, at ullamcorper neque lorem et arcu. </p>
<p>Nunc molestie ultrices rutrum. Quisque leo tellus, eleifend vel scelerisque rhoncus.</p>
<p>>> Læs yderligere her</p>
</div>
</div>
<div id="footer">Capella Huset • Indiakaj 1 • 2100 København Ø • Danmark • Telefon: (+45) 33 93 11 81<br />
Vestergade 19B • 8000 Århus C • Danmark • Telefon: (+45) 72 30 04 88<br />
Telefax København: (+45) 33 93 14 46 Telefax Århus (+45) 86 27 11 87: • e-mail: scandiahousing#scandiahousing.com<br />
</div>
</div>
</body>
</html>
In the current version I have hardcoded all the images paths and they are showing correctly.
It is the formatting that goes completely wrong.
Which version of Outlook? 2007 uses Word to render HTML email and can't handle floats or positions and sometimes background images...among a host of other things. I've found the best way to generate HTML email is to write it like a website from 2000. Table based layouts etc...
Related
My web site's links are not working.
My site : https://overlap.ulb.be/public/
When I click on a link, I have a 404 NOT FOUND (on any link)
If I click on the link "à propos" (about), I have this link :
https://overlap.ulb.be/about
We can see that I don't have anymore the public name in the URL.
This is a part of my code (routes)
Route::get('about', [PlanteController::class, 'about']);
and the controller code :
public function about()
{
return view('phyto.about' );
}
And the view's code :
<x-phyto-layout>
<style>
.h4-about-first {
margin: 0 0 10px 0;
}
.h4-about-m20 {
margin: 20px 0 10px 0;
}
.h4-about {
font-family: "Lato", Helvetica, Verdana, sans-serif;
/*font-family: "Arial Rounded MT Bold", Helvetica, Verdana, sans-serif;*/
font-weight: 500;
line-height: 120%;
padding: 0;
/*padding-left: 0px;*/
/*margin: 0 0 10px;*/
/*color: #413d3d;*/
color: rgba(0, 0, 0, 0.5);
}
.h4-about {
font-size: 22px;
}
.p-about {
font-family: "Lato", Helvetica, Verdana, sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #413d3d;
/*margin: 0 0 18px 0;*/
margin: 0 !important;
padding: 0;
/*padding-left: 0px;*/
}
</style>
<!-- About page container -->
<div class="page-container">
<div class="bloc bloc-fill-screen l-bloc" id="bloc-7">
<div class="container fill-bloc-top-edge">
<div class="row">
<div class="bloc l-bloc" id="bloc-13" style="">
<div class="container bloc-lg">
<div class="row">
<div class="col">
{{--<h3 style="font-size: 24px !important" class="mg-md h3-style">À propos de nous</h3>--}}
<h4 class="h4-about h4-about-first">À propos de nous</h4>
<p class="p-about" {{--style="color:black !important"--}}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci alias aliquid at aut ea
eligendi, enim esse ex excepturi in ipsam neque odio praesentium repellendus sed tenetur totam unde.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci alias aliquid at aut ea
eligendi, enim esse ex excepturi in ipsam neque odio praesentium repellendus sed tenetur totam unde.
</p>
{{--<h3 style="padding-top: 24px;font-size: 24px !important" class="mg-md h3-style">Projet Phyto ?</h3>--}}
<h4 class="h4-about h4-about-m20">Projet Phyto ?</h4>
<p class="p-about" {{--style="color:black !important"--}}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci alias aliquid at aut ea
eligendi, enim esse ex excepturi in ipsam neque odio praesentium repellendus sed tenetur totam unde.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci alias aliquid at aut ea
eligendi, enim esse ex excepturi in ipsam neque odio praesentium repellendus sed tenetur totam unde.
</p>
{{--<h3 style="padding-top: 24px;font-size: 24px !important" style="padding-top: 30px" class="mg-md h3-style">Collaborateurs</h3>--}}
<h4 class="h4-about h4-about-m20">Collaborateurs</h4>
<p class="p-about" {{--style="color:black !important"--}}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci alias aliquid at aut ea
eligendi, enim esse ex excepturi in ipsam neque odio praesentium repellendus sed tenetur totam unde.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci alias aliquid at aut ea
eligendi, enim esse ex excepturi in ipsam neque odio praesentium repellendus sed tenetur totam unde.
</p>
<h4 class="h4-about h4-about-m20">Nom latin</h4>
<p class="p-about" {{--style="color:black !important"--}}>
Le nom latin fait référence à la dernière classification (lien : www.derniere-classification.org)
</p>
<a href="/gpd?p=search" class="btn btn-lg btn-more-link-style btn-sq btn-golden-green float-lg-none mt-5">
Recherche de plantes
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- bloc-7 END -->
Thank you
{{--<div class="bloc none l-bloc" id="home-about">
<div class="container bloc-xl">
<div class="row">
<div class="col-md-2 order-md-1">
<img src="/images/valeriane_rouge.jpg" data-src="/images/valeriane_rouge.jpg" class="img-fluid mx-auto d-block lazyloaded">
</div>
<div class="col-md-2 align-self-center">
<h2 class="mg-md titulo01 h2-margin-bottom">Qu'est ce que ULB-PHYTO?</h2>
<p class="parrafo01">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dicta error explicabo,
harum hic ipsam laboriosam molestiae nihil odit optio porro provident repellendus
saepe sed sequi similique velit vitae, voluptatem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium amet delectus,
dicta dolor ea eligendi ex, excepturi facere
incidunt iste maiores porro possimus, qui rerum velit vitae voluptatem! Repudiandae.
</p>
</div>
</div>
</div>
</div>--}}
I also have a .htaccess :
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(.*)$ public/$1 [L]
</IfModule>
your issue was not loading your asset correctly. you can put the full URL of styles and javascript in your app layout including the public or you can use the asset function to generate a URL for an asset using the current scheme of the :
<link rel="stylesheet" type="text/css" href="{{asset('css/style.css')}}">
if you are using the asset method you should put the ASSET_URL variable in your .env file
ASSET_URL=https://overlap.ulb.be/public
UPDATED
if you mean images in your style you have two solutions, you can write inline style in your blade in this case you can use the asset method like the above example OR change all background URLs in the external style CSS file with
background-image: url("/public/images/...");
I use the templates plugin for my ckeditor and I input a 2 column structure like this:
<div class="row">
<div class="two_col half">
<p>Info Block One. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="two_col half">
<p>Info Block Two. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
My content editors then edit the content of each div and input whatever text they need to.
The issue I'm having is that when my editors highlight the lorem ipsum text and delete it to start their content, the delete action also deletes the actual div itself, resulting in this:
<div class="row">
<div class="two_col half">
<p>Info Block One. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
Is there something I can do to stop that from happening, I would like the div to remain after the user deletes the lorem ipsum placeholder text.
I'm using version 4.5.4
I don't know how to prevent it from the CK Editor perspective, but from Kentico point of view, you can style the template to have two Editable texts next to each other for those two columns. You can either have two web part zones - one editable text per each or two texts in one zone.
Is it possible to create such a design with Bootstrap: the image taking the top left and surrounded by text on wide devices and the image on top of the text on narrow devices? I am not sure how this positioning would be called and couldn't find a similar example.
I can't say too much without seeing your HTML or CSS. But I can provide an example of how this may work. I will assume your image will be large enough to fill a narrow device.
The CSS attribute and the terminology you would be looking for is "float" some documentation can be found here.
The HTML below is an example of an image with some text in it.
<p>
<img src="example.png" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id pulvinar urna. Cras scelerisque finibus aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut nec interdum metus. Donec iaculis, nisl quis dignissim tincidunt, lorem nulla rhoncus turpis, eu fermentum ante orci a libero. Suspendisse varius nisl ut dui tincidunt, et feugiat eros egestas. Sed rhoncus viverra tellus ut pulvinar. Morbi id enim eget mauris bibendum tristique. Duis gravida ligula metus, quis porta massa mattis facilisis.
<p>
Now for some CSS.
/* This will align your image to the left within a p tag */
.image {
float: left;
margin: 10px;
}
/* To accommodate a smaller screen you will need a media query */
#media screen and (max-width: 640px) {
.image {
width: 100%;
margin: 10px auto;
}
}
I have made a quick JSfiddle with an example here. Hopefully I have provided you with enough to help you with your problem.
I'm trying to add swype support to my winjs applicaiton. It works great as long as the content has no scroll area. However as soon as the content overflows the page, the swype gestures don't work anymore.
If I set body { overflow-y: auto; } to hidden it works fine, but when there is a scrollbar, the swype gestures are not triggered anymore. Why?
Here is my sample:
<html>
<head>
<meta charset="utf-8" />
<title>PointerInput</title>
<link href="gestures.css" rel="stylesheet" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<link href="/css/ui-themed.css" rel="stylesheet" />
<link href="/css/default.css" rel="stylesheet" />
<style>
body {
overflow-y: auto;
}
</style>
<script>
$(function () {
$("body").swipe({
swipe: function (event, direction, distance, duration, fingerCount) {
$("#lastswype").text(direction);
}
});
});
</script>
</head>
<body>
<div class="TargetContainer" id="targetContainer">
<h1>Hello world</h1>
<h2>Last swype was: <span id="lastswype"></span></h2>
<div id="longText">
<p>
Lorem ipsum dolor sit amet, usu no illum petentium. Deterruisset definitiones reprehendunt eu mei. Cum falli volutpat at. Diceret splendide sed in. Sint noster deseruisse quo in. Vix nihil iisque dissentias at, harum facilis eu vel.
Pro eu dico decore consul. Ea posse incorrupte eam, ea affert verear dissentiunt eos. Mentitum intellegam at sit, stet repudiandae vel eu, sea error harum postea ut. Quod habeo tibique est an, vivendo salutatus pri an. Per tamquam tacimates in. Ut odio autem semper sed, cum ne quod aeterno praesent.
Ut oblique adversarium vis, et commodo discere eloquentiam eum, impetus tritani detracto ius ea. Ne sea expetenda deterruisset. Ea has populo ornatus feugait, assum voluptua interesset cum et. Mel ad aliquip periculis, ad eam vide altera splendide, alienum explicari ut mel. Qui laoreet tibique expetenda eu.
Mel nullam iuvaret ex, vix te tollit nullam. Illud quaestio reformidans cum et, et alia melius eam. Cum summo malorum ex. An decore nonumy appareat pro, alterum elaboraret concludaturque nec an. Ut vim aperiam oblique delectus. Duo et cibo labitur definiebas, ne affert rationibus sed, fuisset invenire vis ne.
Ad discere dolores accusata vix, aperiam vivendo cu vel, quo id nominavi dignissim temporibus. Nec summo democritum in, porro nominavi appareat nec cu. Similique ullamcorper vim ad, at epicuri phaedrum pri, est no alii facilis definitionem. Possim numquam et duo, quo an partem urbanitas, eu efficiendi scripserit vim. Ius putant dolores at, ut assum delenit definiebas sed. Tamquam fabellas sed at, ad ius quem affert nominavi, id elit oratio accusamus eam. Quando nostrum platonem vim ex, per ut tation nonumy assueverit.
Lorem ipsum dolor sit amet, usu no illum petentium. Deterruisset definitiones reprehendunt eu mei. Cum falli volutpat at. Diceret splendide sed in. Sint noster deseruisse quo in. Vix nihil iisque dissentias at, harum facilis eu vel.
Pro eu dico decore consul. Ea posse incorrupte eam, ea affert verear dissentiunt eos. Mentitum intellegam at sit, stet repudiandae vel eu, sea error harum postea ut. Quod habeo tibique est an, vivendo salutatus pri an. Per tamquam tacimates in. Ut odio autem semper sed, cum ne quod aeterno praesent.
Ut oblique adversarium vis, et commodo discere eloquentiam eum, impetus tritani detracto ius ea. Ne sea expetenda deterruisset. Ea has populo ornatus feugait, assum voluptua interesset cum et. Mel ad aliquip periculis, ad eam vide altera splendide, alienum explicari ut mel. Qui laoreet tibique expetenda eu.
Mel nullam iuvaret ex, vix te tollit nullam. Illud quaestio reformidans cum et, et alia melius eam. Cum summo malorum ex. An decore nonumy appareat pro, alterum elaboraret concludaturque nec an. Ut vim aperiam oblique delectus. Duo et cibo labitur definiebas, ne affert rationibus sed, fuisset invenire vis ne.
Ad discere dolores accusata vix, aperiam vivendo cu vel, quo id nominavi dignissim temporibus. Nec summo democritum in, porro nominavi appareat nec cu. Similique ullamcorper vim ad, at epicuri phaedrum pri, est no alii facilis definitionem. Possim numquam et duo, quo an partem urbanitas, eu efficiendi scripserit vim. Ius putant dolores at, ut assum delenit definiebas sed. Tamquam fabellas sed at, ad ius quem affert nominavi, id elit oratio accusamus eam. Quando nostrum platonem vim ex, per ut tation nonumy assueverit.
</p>
</div>
</div>
</body>
</html>
After some research, I found out that when an area has a scrolling area doesn't propergate touch events, if not specified otherwise. For eaxample, if an area has horzontal scrolling, I have to spezify, that vertical touch events are still allowed. This can be done with the touch-action property (http://msdn.microsoft.com/en-us/library/windows/apps/hh767313.aspx ).
This fixes my problem:
<style>
body {
overflow-y: auto;
touch-action: pan-x:
}
</style>
I use this jquery plugin for "see more" text:
http://keith-wood.name/moreRef.html
I save from tinymce editor html text into mysql database. Then I display html text in a php page, and I use "see more" text jquery plugin for show only 100 words of text.
My problem is that that plugin doesn't retain html formatted text, but it changes html formatted text into simple text, it remove html tag.
How can I retain text with html tag for display formatting text properly and have also "see more" link?
You can do it with pure css and keep the html in place. Here is a JS fiddle (less and more will not be displayed on IE6,7,8 and the content will be expanded)
http://jsfiddle.net/6sj4e/45/
.text {
height: 50px;
overflow: hidden;
height: 100%\9;
}
input.less-more,
input.less-more:checked ~ label.more,
input.less-more:not(:checked) ~ label.less {
display: none;
}
and the html :
<input id="chbox" class="less-more" type="checkbox">
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div>
<label for="chbox" class='more'>more</label>
<label for="chbox" class='less'>less</label>