I want to wrap text in oval shape arround an image but the text keep overlapping over the image. I tried changind the border-radius, width and height properties etc. of the wraping element (i.e image) but it doesn't work. Below is my html and css code:
Html:
<div id="circular-shape">
<img src="blackberries-basket.jpg" class="curve">
<p>/*...text to wrap around circle side...*/
</p>
</div>
CSS:
#circular-shape {
font-family: Open Sans, sans-serif;
margin: 2rem;
}
#circular-shape p {
line-height: 1.8;
}
#circular-shape .curve {
width: 33%;
height: 33%;
min-width: 250px;
float: left;
border-radius: 50%;
-webkit-shape-outside:circle();
shape-outside:circle();
}
How can I stop the text from touching/overlapping the image at the left.Please help.
Just add margin:
img {
float: left;
margin: .5em;
border-radius: 50%;
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
}
<div class="wrap">
<img src="http://www.fillmurray.com/g/100/100" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ipsam harum enim omnis, iure laboriosam perferendis neque minima aspernatur culpa recusandae sunt quae minus, est quo ipsum ipsa laborum aperiam itaque facere sequi similique dignissimos
repellendus excepturi! Doloribus, voluptate! Voluptatibus facere nisi nesciunt aliquid maxime vitae soluta earum sint quis distinctio, molestias quod dicta deleniti debitis accusantium at fugiat illum voluptatum dignissimos dolore temporibus obcaecati
sunt non. Amet, et? Consequatur iusto nihil blanditiis amet placeat deleniti perspiciatis odit esse officia, dolor molestiae illum quo maiores quia nam delectus ut libero temporibus eveniet aperiam, nemo cupiditate, similique porro reprehenderit.
Molestiae, perspiciatis!</p>
</div>
Add this to your CSS
p {
position: relative;
left: 35px;
}
Increase the pixels if you want to.
Related
I'm making a parallax website and at the top of the page I want the left to be text and the right to be an image. At this moment in time the image only shows up under the text div.
.section {
width: 100%;
text-align: center;
padding: 50px 80px;
}
.sub-section {
margin: 0;
padding: 0;
width: auto;
}
<section class="section section-light">
<div class="sub-section">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio neque quam quis minima, rerum consequatur ex porro alias iure ducimus ipsam eligendi ullam mollitia delectus id magnam numquam, excepturi beatae laudantium voluptatibus accusantium quia?
Omnis quia harum ab provident, dolor earum itaque maiores quasi iusto soluta fugiat eos cumque dignissimos sint laudantium reprehenderit quod excepturi voluptate reiciendis ipsum laborum architecto vitae! Modi nobis ipsum laudantium fugit reiciendis
alias corrupti laboriosam quasi voluptates necessitatibus distinctio cum pariatur dolorum labore qui, ad sed saepe, nam porro sequi eaque officiis quod minus sint? Provident modi dolores recusandae laboriosam a cumque doloribus nisi repudiandae.
</p>
</div>
<img src="resources/img/scene1image.png" alt="scene1image.png">
</section>
If you want your text to be on the left and image on the right, you need to create one div containing the text and one div containing the image. Then you can put both of it into 1 div to contain both of them (nested divs) and set inline-block to both the inner divs.
You can then set both the inner divs to 50% , so they make up 100% of the width. But since you have a padding (left and right) of 80px, use calc(50%-80px) so that you create a width of 50% - 8px.
Try this:
* {
padding: 0;
margin: 0;
}
.section {
width: 100%;
text-align: center;
padding: 50px 0 50px 80px;
}
.sub-section {
margin: 0;
padding: 0;
width: auto;
display: inline-block;
width: calc(50% - 80px);
}
.sub-section-img {
display: inline-block;
width: calc(50% - 80px);
}
.sub-section-img img {
width: 100%;
height: 80vh;
}
<section class="section section-light">
<div class="sub-section">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio neque quam quis minima, rerum consequatur ex porro alias iure ducimus ipsam eligendi ullam mollitia delectus id magnam numquam, excepturi beatae laudantium voluptatibus accusantium quia?
Omnis quia harum ab provident, dolor earum itaque maiores quasi iusto soluta fugiat eos cumque dignissimos sint laudantium reprehenderit quod excepturi voluptate reiciendis ipsum laborum architecto vitae! Modi nobis ipsum laudantium fugit reiciendis
alias corrupti laboriosam quasi voluptates necessitatibus distinctio cum pariatur dolorum labore qui, ad sed saepe, nam porro sequi eaque officiis quod minus sint? Provident modi dolores recusandae laboriosam a cumque doloribus nisi repudiandae.
</p>
</div>
<div class="sub-section-img">
<img src="http://lorempixel.com/200/200/" alt="scene1image.png">
</div>
</section>
Edit:
1) Added a new CSS rule with vh. Now, you can set the image height to the exact height. You got to do trial and error to suit your exact height desired, just increase / decrease the value in height: 80vh.
2) Removed the padding on the right since you want the image to the edge. Changed the values in .section css.
3) If you want absolutely no gap to right of the image, then add the CSS reset (removal of the default padding and margin).
* {
padding: 0;
margin: 0;
}
Making a Reactjs app. Referring to the code, I would like to make the height of the colorTab div, equal and responsive to that of the content div. The height of content must be dynamic given that I would like it to be defined by the amount of text in tile + description, which is variable, and the width of the window.
Currently, when I omit min-height from colorTab's CSS and simply have height: 100%; defining colorTab's height, colorTab disappears. Adding the min-height gives it that height but then it becomes unresponsive to the height of content which is the goal. How do I solve this issue?
JSX:
<div className="wrapper">
<div className="colorTab" style={color}>
</div>
<div className="content">
<tr>
<td className="title">
<a href={link}>{title}</a>
</td>
</tr>
<tr>
<td className="description">
{description}
</td>
</tr>
</div>
</div>
CSS:
.wrapper {
min-height: 48px;
overflow: hidden;
}
.colorTab {
float: left;
position: relative;
width: 5px;
min-height: 48px;
height: 100%;
border-radius: 5px;
margin-left: 15px;
}
.title {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.description {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
Flexbox will offer the functionality you need.
Put display: flex on your container class. And flex: 1 on your content div. No matter how much content you place in the content div the colorTab div will match its height.
Example in pure HTML/CSS (no React):
.wrapper {
overflow: hidden;
display: flex;
}
.colorTab {
position: relative;
width: 5px;
border-radius: 5px;
background: red;
}
.content {
flex: 1;
}
<div class="wrapper">
<div class="colorTab">
</div>
<div class="content">
<div class="title">
<a>Your Title</a>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
</div>
</div>
Now, I would absolutely recommend the flexbox mentioned in the other answer but...
but for some other outdated browsers which do not support it (cough
cough looking at you, grandpa, using that same old version of IE)... it
might be good idea to provide extra version support.
So, for answer's completion sake:
The other option is to utilize the tables.
.wrapper {
display: table;
}
.description {
display: table-cell;
}
.colorTab {
display: table-cell;
width: 5px;
border-radius: 5px;
background: red;
}
// not necessary, but for esthetic reasons
.content {
position: relative;
left: 10px;
}
<div class="wrapper">
<div class="colorTab">
</div>
<div class="content">
<div class="title">
<a>Your Title</a>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nam perspiciatis aperiam mollitia obcaecati molestiae, consequuntur saepe repellendus cumque aliquid. Ullam reiciendis praesentium repellendus ipsam, qui illum. At, aliquid quidem. Reprehenderit eligendi voluptatem maiores deleniti id nulla, pariatur ipsa ducimus accusantium! Unde ea nostrum eligendi suscipit impedit, laborum adipisci accusamus ducimus temporibus eius inventore optio officia reiciendis porro eos assumenda numquam velit obcaecati. Perferendis, ipsum! Facilis fuga dolorum nobis nihil illo nam, voluptate suscipit excepturi sunt non. Modi perferendis ex illum eaque pariatur laudantium saepe accusantium vel, blanditiis, aperiam odit! Suscipit ullam, necessitatibus est distinctio obcaecati, odio ipsa blanditiis consequatur.
</div>
</div>
Using HTML and CSS, I'm attempting to achieve a seemingly simply layout with three components : a stickied header, a stickied footer, and a middle area that is 100% of whatever space is left in the browser window. I'd also like my entire site to be centered horizontally.
I've searched for and applied various answers from this forum, but nothing seems to work once I start to apply new characteristics to the page.
I'd like to also absolute center what will be a horizontal table in the above-mentioned content area, as well as position elements in the header and footer -- But I can't seem to get the basics down. What am I doing wrong?
#site {
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
#header {
width: 1024px;
height: 120px;
display: table-cell;
vertical-align: middle;
background-color: aqua;
}
#content {
width: 1024px;
height: 100%;
vertical-align: middle;
background-color: red;
}
#footer {
width: 1024px;
height: 120px;
display: table-cell;
vertical-align: middle;
background-color: aqua;
}
.logo {
display: inline-block;
vertical-align: middle;
}
.item {
display: table-cell;
}
.copy {
font-size: 12pt;
font-family: Arial;
display: inline-block;
vertical-align: middle;
}
.l1nk {
display: inline-block;
vertical-align: middle;
}
.l2nk {
display: inline-block;
vertical-align: middle;
}
<div id="site">
<div id="header">
<img class="logo" src="Images/logo.png" alt="logo" height="60" width="195" />
</div>
<div id="content">
<img class="item" src="Images/item.png" alt="logo" height="150" width="150" />
</div>
<div id="footer">
<div class="copy">xoxo © xoxo </div>
<div class="l1nk">
<img src="Images/insta100.png" alt="instagram" height="25" width="25" />
</div>
<div class="l2nk">
<img src="Images/twttr100.png" alt="twitter" height="25" width="25" />
</div>
</div>
I'm new to this forum, and a novice programmer, so I'll roll with the punches. But I'd like a stronger foundation so that I can move forward with my code. Thanks so much
Personal I would use flexbox to accomplish this but an easy way to do it as well with out having to learn flexbox looks a little something like this
https://jsfiddle.net/kriscoulson/2fqu03b2/
this one has content in the content block
https://jsfiddle.net/kriscoulson/2fqu03b2/1/
HTML
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 1024px;
height: 100%;
position: relative;
}
.header {
background-color: cyan;
height: 120px;
}
.content {
background-color: red;
height: calc(100% - 240px);
overflow: auto;
}
.footer {
width: 100%;
height: 120px;
background-color: cyan;
position: absolute;
bottom: 0;
}
<div class="container">
<div class="header"> header </div>
<div class="content"> content </div>
<div class="footer"> footer </div>
</div>
You can use the calc function in css to help determine the height since you know that the header is 120px and the footer is 120px we know that is 240px total that the content will not take up.
// EDIT
This is with the use of flexbox if you are trying to learn flexbox to do it
https://jsfiddle.net/kriscoulson/2fqu03b2/2/
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 1024px;
height: 100%;
display: flex;
flex-direction: column;
}
.header {
background-color: cyan;
height: 120px;
}
.content {
background-color: red;
overflow: auto;
flex: 1;
}
.footer {
width: 100%;
height: 120px;
background-color: cyan;
justify-content: flex-end;
}
<div class="container">
<div class="header"> header </div>
<div class="content"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus fugit atque magni quis at, voluptate consectetur voluptates laboriosam distinctio beatae quos sunt architecto? Quis nihil optio incidunt a, ad iure!</div>
<div>Obcaecati expedita maiores ab. Tempora alias culpa, error quasi, quia delectus. Ratione, sapiente, at repellendus aspernatur debitis nesciunt eum fuga quibusdam in, suscipit omnis minima vero error perspiciatis, eaque corrupti?</div>
<div>Ullam praesentium doloremque inventore! Similique dolor delectus, consequatur at doloremque quibusdam sed ullam officiis molestias dignissimos doloribus in obcaecati explicabo ipsum ducimus et error, atque. Itaque consequatur perspiciatis dignissimos eligendi!</div>
<div>Maxime natus asperiores autem nobis in dicta necessitatibus consequuntur et expedita architecto molestias veniam, voluptate adipisci corporis qui sed modi sunt saepe sapiente vel voluptatem placeat facere nihil repudiandae. Cumque?</div>
<div>Rerum quod asperiores reprehenderit itaque sunt repellat natus nostrum, modi exercitationem impedit odit adipisci voluptates, facilis eligendi eum ex accusamus tenetur omnis fugiat iste provident ipsa earum. Optio, culpa, repudiandae.</div>
<div>Quo amet ex obcaecati natus, nesciunt accusamus eius laudantium magni id. Dolorum mollitia ab nam saepe excepturi, sapiente quisquam ducimus, perspiciatis obcaecati modi qui, sit laborum vero vitae cumque sequi!</div>
<div>Repudiandae laborum ducimus totam! Neque aliquam alias necessitatibus praesentium numquam fuga totam inventore quis ab tempore aliquid dolore, similique voluptatem ipsam nisi earum ea quidem dolor, optio quibusdam? Sed, corrupti.</div>
<div>Culpa a quos, explicabo adipisci pariatur impedit obcaecati consectetur aut maxime architecto eos facere ex voluptate provident iste blanditiis sed laboriosam magni aspernatur esse corrupti quasi quod! Officiis corrupti, voluptatibus.</div>
<div>Optio sunt ipsam, et esse libero consequatur maiores illum nihil ad asperiores sed rem soluta sapiente quia nobis voluptatem, velit pariatur sint non aperiam, nostrum. Dolorum officiis, amet tenetur odio?</div>
<div>Culpa dicta in soluta, cum, sapiente natus atque, vitae, laudantium ipsam dolorem obcaecati ad quibusdam. Accusantium consequatur sit odit minima, omnis nihil unde pariatur. Distinctio doloremque earum, deserunt doloribus culpa.</div>
<div>Doloribus nobis, minima animi. Rerum magni hic dicta iste, laborum similique, sed corrupti accusamus ad quam assumenda ab consectetur suscipit nostrum. Sapiente aliquid, voluptatibus eius optio modi tenetur, unde iure.</div>
<div>Impedit, dicta, atque nesciunt quos laboriosam facilis, nihil assumenda officiis omnis reiciendis iste quisquam asperiores eveniet ad corrupti error voluptatum consectetur velit neque. Minima distinctio, corporis expedita eius sapiente cumque?</div>
<div>Repellendus tempora rem corporis ullam soluta est veritatis, itaque! Quo fugit dicta minus obcaecati minima repellendus numquam, ipsam non eligendi porro exercitationem nesciunt vel similique nemo necessitatibus dolorem dolorum id?</div>
<div>Ad obcaecati voluptas nobis veniam explicabo ut atque eaque itaque, magni sed, veritatis totam ea, repellendus in quia iure soluta suscipit aliquam? Adipisci fugit ipsum delectus nisi vitae, veritatis ducimus.</div>
<div>Dolorem inventore facere doloremque quod excepturi. Quo nostrum non quaerat pariatur. Pariatur necessitatibus deleniti ea dolores ut sequi saepe sint nulla. Minima harum explicabo voluptate sunt, adipisci quisquam delectus distinctio.</div>
<div>Neque, numquam libero tempora harum accusantium tempore veniam reprehenderit ea ratione, delectus alias molestias reiciendis eos cumque labore nulla quasi aliquam qui eaque accusamus dolor iste sed veritatis? Maxime, cum!</div>
<div>Reiciendis veritatis recusandae aliquid eos laudantium culpa, consectetur aspernatur voluptate expedita? Explicabo, quisquam! Alias mollitia velit nesciunt, tempore ipsum distinctio, iusto, quidem dolor odio consequatur, ipsa iste. Repellendus veritatis, quas?</div>
<div>Quos omnis repudiandae, corrupti consequuntur culpa. Magnam aperiam, ad accusantium consequuntur. Nemo iure ab temporibus molestias et nesciunt eum excepturi magni, ipsum quae, molestiae eaque reprehenderit voluptatem! Fugit, praesentium, beatae!</div>
<div>Sit officia, quasi veritatis sint inventore odit consequatur iusto et ex sequi nihil quisquam praesentium, quos neque eum. Atque recusandae dolorum illum iusto consectetur dolores maiores blanditiis! Libero, explicabo officiis?</div>
<div>Ratione repudiandae ad officia quas nemo eos molestias quasi, perferendis facere, aspernatur. Aliquid nobis est dolor natus soluta harum veniam enim deserunt sint. Unde corrupti magni nobis, non a, necessitatibus.</div> </div>
<div class="footer"> footer </div>
</div>
I'll go with the flex option while i was waiting for a feed back about it. ...
header,
footer {
background: tomato;
min-height: 15vh;/* any height is fine actually, mind some room for main if small window ... header& footer should not be covering the entire window */
display: flex;/* to dispatch children */
flex-direction: column;/* not in a row ! */
}
main {
background: turquoise;
flex: 1;/* fill up entire space */
overflow: auto;/* if space too small, let me scroll */
display: flex;/* to easy center content */
flex-direction: column;/* lets behave as block container */
}
div {
margin: auto;/* flex children will center on both axis , an easy one !*/
}
body {
max-width: 1024px;/* so it can shrink beloww , else remove the max- prefix */
height: 100vh;/* window's height */
margin: 0 auto;
display: flex;
flex-direction: column;
}
main:hover div:after {
display: block;
content: 'test';
height: 200vh;
}
<header>
<div>
<h1>header</h1>
</div>
</header>
<main>
<div>main, hover me to make me taller and scroll</div>
</main>
<footer>
<div>footer </div>
</footer>
for the display table-layout, you should start from body :
html, body {
height:100%;
margin:0;
}
body {
width:1024px;
margin:auto;
display:table;
}
header,footer,main {
display:table-row;
}
header>div,main>div,footer>div {
display:table-cell;
vertical-align:middle;
}
main {
height:100%;
background:turquoise;
}
footer,header {
height:120px;
background:tomato;
}
<header>
<div>
<h1>header</h1>
</div>
</header>
<main>
<div>main content, i will not scroll, i will push the footer</div>
</main>
<footer>
<div>footer </div>
</footer>
I have a div with a height of 100vh, and a width in percentage. When I add content to this div (in the example some lorem ipsum), the div moves downwards. When the div is empty of content, it stays at the top of the screen.
Inspecting this does not reveal anything unusual that I can find - no margins, position changes or anything.
How to I get the div with content to stay at the top of the page?
body {
font-size: 0;
}
.thin,
.wide {
height: 100vh;
display: inline-block;
font-size: 0;
}
.wide {
width: 61.80%;
background-color: red;
}
.thin {
width: 38.20%;
background-color: green;
}
.wide p {
margin: 0;
padding: 0;
font-size: 15px;
}
<div>
<div class="thin">
<div class="wide">
</div>
<div class="thin"></div>
</div>
<div class="wide">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam beatae corporis doloribus ea magnam minus molestiae veritatis. Beatae consectetur dicta doloribus eaque explicabo iure possimus quisquam sequi veritatis voluptas!</span><span>Accusamus dolor eius magnam officia qui. Ab at commodi consectetur distinctio ducimus earum et explicabo fuga illo ipsa iure laudantium natus nesciunt nisi ratione rerum sit tempore unde velit, vero.</span><span>Ab debitis earum error explicabo facilis fugit itaque, nobis officia optio pariatur perferendis quas quasi quibusdam quidem rerum similique voluptatem! Aliquam distinctio eos molestias natus nostrum ut voluptatem? Illo, quam!</span><span>Dolorem esse est impedit iusto maxime, neque officia voluptatum? Assumenda eos et facilis fugit incidunt inventore magni, maiores, minima modi mollitia nihil officiis quibusdam quisquam rem veniam vitae voluptatibus. Aut!</span>
</p>
</div>
</div>
Just add vertical-align: top to the CSS rule for the inline-block elements, namely, .thin and .wide.
By default, vertical-align is set to baseline. For an inline element with text, the base line corresponds to the bottom-most line of the text block, whereas for an empty element, the baseline is at the top where the text would start.
This leads to the top of the empty elements aligning with the bottom of the text in the filled element.
Setting vertical-align: top solves the problem.
body {
font-size: 0;
}
.thin,
.wide {
height: 100vh;
display: inline-block;
font-size: 0;
vertical-align: top;
}
.wide {
width: 61.80%;
background-color: red;
}
.thin {
width: 38.20%;
background-color: green;
}
.wide p {
margin: 0;
padding: 0;
font-size: 15px;
}
<div>
<div class="thin">
<div class="wide">
</div>
<div class="thin"></div>
</div>
<div class="wide">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam beatae corporis doloribus ea magnam minus molestiae veritatis. Beatae consectetur dicta doloribus eaque explicabo iure possimus quisquam sequi veritatis voluptas!</span><span>Accusamus dolor eius magnam officia qui. Ab at commodi consectetur distinctio ducimus earum et explicabo fuga illo ipsa iure laudantium natus nesciunt nisi ratione rerum sit tempore unde velit, vero.</span>
</p>
</div>
</div>
How do I use the parent div (#warped) to move and contain, my rotated span elements (which are in fact 'curved words' that I want to keep in said position) in one movement?
I have used this link to help generate the curvature: http://csswarp.eleqtriq.com/
The <span> tags are placed within the #warped parent element in my HTML document, but despite this on the webpage itself they appear to be located outside of #warped div
I would like to, for example, move the entire curved word to the left of the page. How would I do this?
Here is the CSS:
#warped {
position: relative;
display: block;
}
#warped>span[class^=w]:nth-of-type(n+0) {
display: block;
position: absolute;
transform-origin: 50% 100%;
}
#warped span {
font-family: 'ABeeZee';
font-size: 38px;
font-weight: regular;
font-style: normal;
line-height: 0.65;
white-space: pre;
overflow: visible;
padding: 0px;
}
#warped .w0 {
transform: rotate(0.91rad);
width: 20px;
height: 24px;
left: 552.15px;
top: 152.55px;
}
#warped .w1 {
transform: rotate(1.06rad);
width: 23px;
height: 24px;
left: 565.17px;
top: 174.68px;
}
etc etc
Here is the HTML as well:
<div id='warped'>
<span class='w0'>F</span><span class='w1'>a</span><span class='w2'>n</span><span class='w3'>t</span><span class='w4'>a</span><span class='w5'>s</span><span class='w6'>t</span><span class='w7'>i</span><span class='w8'>c</span><span class='w9'>!</span><span class='w10'>!</span><span class='w11'>!</span><span class='w12'>!</span>
</div>
The issue is the position:absolute and display:block on the span elements. Change it to:
#warped>span[class^=w]:nth-of-type(n+0) {
display: inline-block;
transform-origin: 50% 100%;
}
As long as you don´t have a specified width on your #warped it will be 100% of the browser and the text will look like it's outside.
Try this: http://jsfiddle.net/54L30x1j/
Basically on their site: http://csswarp.eleqtriq.com/, you can re-size the window and make it small. Then your self you can further reduce the extra size. Put your text in top left corner as much as possible.
<div id='warped'> <span class='w0'>F</span><span class='w1'>a</span><span class='w2'>n</span><span class='w3'>t</span><span class='w4'>a</span><span class='w5'>s</span><span class='w6'>t</span><span class='w7'>i</span><span class='w8'>c</span>
</div>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quasi ad ipsum cum ipsa repellendus recusandae in molestias fugiat placeat maiores aspernatur numquam neque id blanditiis. Iusto amet odio natus.</span>
<span>Ipsam quas incidunt deserunt molestias asperiores deleniti temporibus quisquam vel sapiente dolores aliquam eum optio minus cupiditate ipsum illo veritatis eligendi obcaecati porro ea rerum dolore repudiandae neque earum voluptatem.</span>
<span>Totam officiis saepe tenetur tempore voluptate cupiditate fugit exercitationem voluptatem illum possimus. Dicta similique dolore laboriosam ipsum modi minus saepe accusantium consectetur natus architecto harum commodi porro eius est nemo.</span>
<span>Officiis labore quibusdam modi autem velit neque reiciendis unde quaerat delectus expedita consectetur nemo nobis assumenda officia porro cum quos voluptates molestiae enim debitis commodi saepe id dolorum. Repudiandae repellat.</span>
<span>Aspernatur non nobis nesciunt deserunt possimus nulla repellat voluptatibus fuga asperiores error optio ipsa adipisci voluptate quidem esse commodi recusandae molestias dolores iure minima sapiente laborum molestiae dolor quisquam ratione.</span>
</p>