css3 - SVG: text inside text (or using css) -
i'm looking way position text inside text (see example image).
basically see on example char 't' text inside . simplest way implement text mask on rectangle. in case won't work since inner text array of phrases , need see them all.
i'm open kind of solution. i'm trying svg + snapsvg library. i'm opened css solutions too.
update:
(in case wrapping text word or sentence)
you can use text-align:justify
, this:
div { text-align: justify; border:1px dashed red; margin:auto } .w600 { width: 600px; } .w200 { width: 200px; }
<div class="w600">lorem ipsum dolor sit amet, consectetur adipiscing elit. aliquam feugiat turpis ut lectus semper sollicitudin. nullam turpis metus, eleifend ut mattis nec, vehicula justo. in ac rhoncus urna. praesent sodales et felis non pretium. vestibulum eros augue, venenatis in cursus at, tincidunt ac sapien. nullam quis purus luctus ex ullamcorper fringilla vel odio. phasellus ligula enim, placerat id tortor nec, maximus maximus tortor. maecenas accumsan placerat elementum. maecenas accumsan</div> <div class="w200">phasellus vel velit vel mauris facilisis sagittis id eget elit. nulla sit amet ornare arcu, sed aliquam sem. sed molestie tempor nibh et pretium. cras non dui gravida, tincidunt arcu condimentum, dictum dui. proin iaculis diam lacus, @ consequat erat lobortis ornare. donec in ante sed nibh tempus commodo. vivamus id justo vitae lacus varius imperdiet. proin porttitor velit enim, ut molestie sem fermentum ut. integer vitae est non diam dictum sodales. mauris lobortis lectus ligula fringilla, semper ullamcorper lacus condimentum. fusce nisl lectus, pharetra sed augue pulvinar, volutpat mollis justo. phasellus iaculis turpis, ut placerat magna. integer et mollis metus, lacinia arcu. sed @ erat eget lacus dapibus malesuada id eu tortor. nullam et ullamcorper ante, eu venenatis eros. pellentesque tempor quis risus dignissim vulputate. nulla facilisi. aliquam dapibus pharetra risus in consectetur. sed pretium mollis imperdiet. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. fusce eu felis diam. donec sit amet quam eget lorem posuere porta. integer porttitor condimentum neque ut volutpat. nam iaculis feugiat libero et convallis. nullam sed orci ac ante pellentesque pretium. donec tincidunt massa quis est fringilla, nec porttitor purus varius. duis id consectetur nunc. curabitur interdum feugiat lorem sollicitudin. duis tempus orci scelerisque elit facilisis tempus. nulla nec maximus eros.</div>
Comments
Post a Comment