Can I stretch text using CSS?

by

Yes, you can actually with CSS 2D Transforms. This is supported in almost all modern browsers, including IE9+. Here’s an example.

Actual HTML/CSS Stretch Example

HTML

<p>I feel like <span class="stretch">stretching</span>.</p>

CSS

span.stretch {
    display:inline-block;
    -webkit-transform:scale(2,1); /* Safari and Chrome */
    -moz-transform:scale(2,1); /* Firefox */
    -ms-transform:scale(2,1); /* IE 9 */
    -o-transform:scale(2,1); /* Opera */
    transform:scale(2,1); /* W3C */
}

TIP: You may need to add margin to your stretched text to prevent text collisions.

More Related Contents:

  1. Working with CSS in React [closed]
  2. Browser can’t access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
  3. Hiding the scroll bar on an HTML page
  4. CSS3 background image transition
  5. Is there a CSS selector by class prefix?
  6. Position Relative vs Absolute?
  7. Why does the order of media queries matter in CSS?
  8. Truncating long strings with CSS: feasible yet?
  9. Remove padding from columns in Bootstrap 3
  10. External CSS vs inline style performance difference?
  11. xHTML/CSS: How to make inner div get 100% width minus another div width
  12. How to create multi-color border with CSS?
  13. Freeze screen in chrome debugger / DevTools panel for popover inspection?
  14. Modify twitter bootstrap navbar
  15. Can I have multiple :before pseudo-elements for the same element?
  16. CSS Text orientation : vertically oriented to the right
  17. How to get “position:fixed” css to work in IE 7+ with TRANSITIONAL doctype?
  18. How to specify an element after which to wrap in css flexbox? [duplicate]
  19. How to link a CSS file from HTML file?
  20. Build list of selectors with LESS
  21. Changing an input’s HTML5 placeholder color with CSS does not work on Chrome
  22. Is there a “subgrid” feature, to position “grandchildren” of a grid container?
  23. how to rotate text left 90 degree and cell size is adjusted according to text in html
  24. CSS fill remaining width
  25. Set div height equal to screen size
  26. What CSS3 features still need vendor prefixes?
  27. How to fix unexpected column order in bootstrap 4?
  28. CSS Floating Divs with different height are aligned with space between them
  29. Dynamically updating css in Angular 2
  30. How to specify table’s height such that a vertical scroll bar appears?

Leave a Comment