javascript - 居中和调整内容

Question

我有一个用户可变字符串，范围可以从一个单词到几个句子(并且可能包含任何有效的 Unicode 字符)，我想将其显示在一个可变宽度的框中。

在代码中，我希望 HTML 看起来像这样带有任何其他 CSS 或 JS:

<div style="width: 100%; height: 80%" id="text">
    <!--<some more divs or something>-->
        {{content}}
    <!--</some more divs or something>-->
</div>

{{content}} 应该尽可能变大，达到某个最大字体大小(可变)；当它变长到某个最小值(变量)时变小，然后在该点之后被切断。

在任何一种情况下，我都需要它在视觉上居中并且比方框长的单词应该用连字符连接。

我试过结合使用 flexboxes 和 JavaScript 来破解一些东西，但无法弄清楚如何解决所有的错误。

除了最新版本的移动/桌面 Chrome/Safari/Firefox 之外，浏览器支持并不重要。

Answer 1

好的，我相信这就是您想要完成的。代码在下面，注释 block 中有描述。在 chrome 中，您将使用 -webkit-line-clamp 属性，在 firefox 中，您将使用 fadeout 方法，因为 firefox 不支持 clamp 属性。您可以根据自己的喜好调整 css 中的淡出。截止点处的“...”在 Firefox 中仍将存在(请参阅 css 中的 .clamp:after 属性)。

这是更新的 jsFiddle

HTML(要查看更改，只需删除文本，直到在 div 中显示一行)

<div id="textparent">
    <div id="text">
        {{content}}  adkf kfjg; ;akdfg fbfbf egdf hajkh  
        kajfhdg lakjfg  kafd gjkahf   jahfkjadlfh alkgj akjdhg fkafg
    </div>
</div>

CSS

注意:-webkit-line-clamp:3; (这是您要显示的行数)

#text{ 
    width:100%;
    position:relative;
    height:auto;
    text-overflow:ellipsis;
    font-size:25px;
    line-height:1.1;
    display:block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    margin:0 auto;
    box-sizing:border-box;
}

#textparent{
    margin:0 auto;
    width:300px;
    background:#eee;
    top:50px;
    padding:10px;
    height:auto;
    text-align:center;
    position:relative;
    height:100px;
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
}

/*FIREFOX will make use of the clamp class*/
.clamp:after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #eeeeee 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: 0;
    content: "...";
    padding: 0 5px 1px 25px;
    position: absolute;
    right: 0;
}

.clamp {
    height: 5.6em;
    line-height: 1.4em;
    overflow: hidden;
    position: relative;
}

Javascript/JQUERY:尽管 [num_line_to_show] 已在 CSS 中设置，但您可能想要更改或使用的主要变量是 [min_font_size] 和 [num_line_to_show]。

var t = $('#text');

// get the font-size of the div
var font_size = Number(t.css('font-size').replace('px', ''));

// get the line-height of the div (Note: in Chrome this returns the actual height) 
var line_height = Number(t.css('line-height').replace('px', ''));

// minimum height of #text div
// 
// Note: if you were in a browser and the line-height var didn't return the full 
// height as it does in chrome, you would need to do this:
// var min_h = font-size * line_height
var min_h = line_height;

// number of lines to show. basically just retrieving the "-webkit-line-clamp"
// property in the css, otherwise will default to 3, which you can change.
var num_line_to_show = Number(t.css('-webkit-line-clamp')) || 3;

// the maximum height for the #text div. (the added 5 at the end is just
// personal preference)
var max_h = line_height * num_line_to_show * font_size + 5;

// get the height of the div
var h = $('#text').height();

// set this if you want the font to be set at a minimum size 
// when the text is longer than one line
var min_font_size = 20;

注意:您也可以尝试动态设置最小字体大小，如下所示:

// change this to make the font smaller
var shrink_rate = 3;
var min_font_size = font_size - (Math.round((h/min_h)) * shrink_rate;

继续:

// for detecting firefox
var is_ff = navigator.userAgent.toLowerCase().indexOf('firefox');

// if the height of the div is larger than the minimum height, meaning there
// is more than one line now, the font size of the div becomes smaller.
if (h > min_h){
    t.css({'font-size' : min_font_size});

    // if in Firefox browser
    if(is_ff > -1){
        // get the new max height of #text based on the number of lines 
        // with the new minimum font-size
        var txt_max_h = ((line_height-font_size) / num_line_to_show) * min_font_size * num_line_to_show;

        // the new height is greater than the maximum height allowed for the
        // smaller font size
        if (t.height() > txt_max_h){
            // reset the height of #text div to a fixed height
            t.height((min_font_size * num_line_to_show) + 5); 

            // add the clamp class and css will the rest
            t.addClass('clamp');
        }
    }
}

// if firefox, always run this to center the #text div based on its height
if(is_ff > -1){
    t.css({top: ($('#textparent').height() - t.height()) / 2});
}

希望这对您有所帮助!