Wrap text from bottom to top

by

I would not recommend using exotic CSS attributes which aren’t even in Chrome & Firefox yet. The best cross-browser solution is to handle this in Javascript when the document loads. Here’s a sketch of how to do that:

$(function() {
    $(".title").each(function(i,title) {
        var width = 0;
        var originalHeight = $(title).height();
        var spacer = $('<div style="float:right;height:1px;"/>').prependTo(title);
        while (originalHeight == $(title).height()) {
            spacer.width( ++width );
        }
        spacer.width( --width );
    });
});

Working JSFiddle is here: http://jsfiddle.net/zephod/hfuu3m49/1/

More Related Contents:

  1. How would I achieve a shadow that won’t show through transparent text?
  2. Limit text length to n lines using CSS
  3. How can I replace text with CSS?
  4. Truncating long strings with CSS: feasible yet?
  5. Text on image mouseover?
  6. First letter Capitalize and other letters in lower case in css?
  7. Make text height 100% of div?
  8. Inner text shadow with CSS
  9. Align text to the bottom of a div
  10. CSS: transform: translate(-50%, -50%) makes texts blurry [duplicate]
  11. Background color of tspan element
  12. CSS for button with right triangle at lower right [closed]
  13. Border-radius in percentage (%) and pixels (px) or em
  14. Reset CSS display property to default value
  15. CSS selector for “foo that contains bar”? [duplicate]
  16. CSS reset – What exactly does it do?
  17. Font Awesome 5 shows empty square when using the JS+SVG version
  18. HTML colspan in CSS
  19. Rotated elements in CSS that affect their parent’s height correctly
  20. Black transparent overlay on image hover with only CSS?
  21. @font-face anti-aliasing on windows and mac
  22. How to center absolute div horizontally using CSS?
  23. How to get “position:fixed” css to work in IE 7+ with TRANSITIONAL doctype?
  24. How to force re-render after a WebKit 3D transform in Safari
  25. How can I transition height: 0; to height: auto; using CSS?
  26. Is there a “subgrid” feature, to position “grandchildren” of a grid container?
  27. CSS fill remaining width
  28. Does LESS have an “extend” feature?
  29. Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div
  30. Horizontal masonry layout with flexbox CSS only [duplicate]

Leave a Comment