发表新帖
发表新帖

Make lines of text have equal length

前端 未结
关注
4 1053
刺人心
刺人心 2021-02-07 15:44

In centered h1 elements, if the text falls on multiple lines, line breaks make the text look like this:

                This is a header that takes
4条回答
  • 醉梦人生
    醉梦人生 (楼主)
    2021-02-07 16:42

    I would solve it using only strict JavaScript, going this way:

    1. put a class named 'truncate' to h1 tags you want to break
    2. configure the javascript code on your needs knowing that

  • MAXCOUNT: (integer) max chars counted per line
  • COUNT_SPACES: (boolean) white spaces must be counted?
  • COUNT_PUNCTUATION: (boolean) punctuation must be counted?
  • EXACT: (boolean) the last word must be cut?
  • BLOCKS_CLASS: (string) the className of the h1 to consider

    I wrote the code very quickly so it must be better tested for bugs, but it can be a starting point I think.

    I'm not using jQuery in this code to keep the code light and to avoid dependencies.
    I think I'm using all cross-browser commands (cannot test it I've got only linux now). However any correction for cross-browser compatibility task (included the use of jQUery if requested) might be easy.

    Here is the code:

    


    
    






    
    
    
        This is a header that
        takes up two lines
    
    

    
    

    
    
        This is a header that takes 
        up three lines because it
        is really, really long
    
    

    
    

    
    
        This is a header pretty short
        or pretty long ... still undecided
        which in any case is not truncated!

    And here is a demo of that: http://jsfiddle.net/6rtdF/

0 讨论(0)
 看不清?
提交回复
热议问题