TEST 100M - vzpis - text na jeden radek

by Petr Haluza

HTML

<link rel="stylesheet" href="https://b2b.100mega.cz/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="https://b2b.100mega.cz/css/theme-default.css?v=1529505052">
<p class="test stretch one">jsem krátký text</p>
<p class="test stretch two">jsem krátký text</p>
<p class="test stretch three">jsem krátký text</p>
<p class="test stretch two">jsem dlouhý text a asi se sem nevlezu</p>




        <!-- START PAGE CONTAINER -->
        <div class="page-container page-navigation-top-fixed">
            <!-- START PAGE SIDEBAR -->
            
            <!-- END PAGE SIDEBAR -->
            
            <!-- PAGE CONTENT -->
            
            <div class="page-content">
                
                <!-- START X-NAVIGATION VERTICAL -->
                
                <!-- END X-NAVIGATION VERTICAL -->  
                
                
                
                
    <!-- START BREADCRUMB -->
        

        
    <!-- END BREADCRUMB -->                                                

    <!-- START CONTENT FRAME ******************************************************************-->
    <div class="content-frame" id="ProductGallery">
        <!-- START CONTENT FRAME TOP -->
        

        <div class="page-content-wrap col-md-12">
            
                
                            
                    
                
            
            
<div id="snippet--product">                <!-- modal okna pro refres filtru -->
                <div class="modal animated fadeIn" id="modal_product_reload" tabindex="-1" role="dialog" aria-labelledby="smallModalHead" aria-hidden="true">
                    <div class="loader"></div>
                </div>
                <!-- END MODAL WINDOW -->

               <div id="filtrSet">

                    
                        <ul>
                            <li>
                                    Cenový rozsah od 111 650 Kč  do 189 647 Kč  <a class="odebratPrice" data="4369,189647"></a>
...

CSS

p.test {
    background:gold;
    width:300px;
    padding: 10px 0;
}

.stretch_it{
    /*white-space: nowrap;*/
}
.justify{
    /*text-align:justify;*/
}
.shrink {letter-spacing:-0.5px; overflow:hidden;text-overflow:ellipsis;background:yellow;white-space: nowrap;}
.one{font-size:10px;}
.two{font-size:20px;}
.three{font-size:30px;}
.four{font-size:40px;}
.arial{font-family:arial;}

.page-container .page-content {margin-left:0 ; max-width:1024px;}
/*test*/.product-table-A .table.quick .A-link { width: 400px !important;}

JavaScript

$.fn.strech_text = function(){
    var elmt          = $(this),
        cont_width    = elmt.width(),
        txt           = elmt.html(),
        one_line      = $('<span class="stretch_it">' + txt + '</span>'),
        nb_char       = elmt.text().length,
        spacing       = cont_width/nb_char,
        txt_width;
    
    elmt.html(one_line);
    txt_width = one_line.width();
    
    if (txt_width < cont_width){
        //var  char_width     = txt_width/nb_char,
        //     ltr_spacing    = spacing - char_width + (spacing - char_width)/nb_char ; 
        //  one_line.css({'letter-spacing': ltr_spacing});
        one_line.contents().unwrap();
        elmt.addClass('justify');
    } else {
        //one_line.contents().unwrap();
        //elmt.addClass('justify');
      elmt.addClass('shrink');
    }
};


$(document).ready(function () {
    $('.stretch').each(function(){
        $(this).strech_text();
    });
});