Question

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

在代码中，我喜欢看起来像任何其他CSS或JS的HTML：

<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外，浏览器支持并不重要。

mockup boxes @2x

Answer 1

好吧我相信这是你想要完成的。代码如下，注释块中有描述。在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：您可能想要更改或使用的主要变量是[min_font_size]和[num_line_to_show]，尽管[num_line_to_show]已在CSS中设置。

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});
}

希望这有帮助！

Answer 2

及时。

请参阅此Fiddle。

我想我成功做了你想做的事。它适用于Chrome，Firefox和Safari。

HTML：

<div id="container">
    <div id="text">my Text !!</div>
</div>

JS：

var maxFontSize=68; // I think we cannot have bigger than that.
var minFontSize=12;
$('#text').on({
    // setting an event to resize text
    resize:function(e){
        // if no text => return false;
        if (!$(this).html().trim()) return;

        // if already running => return false;
        if (this.running) return;

        this.running = true;

        // get max-height = height of the parent element       
        var h = $(this).parent().height();

        // clone the text element and apply some css
        var clone = $(this).clone()
                               .removeAttr('id')
                               .css({'font-size':0,
                                     'width':$(this).width(),
                                     'opacity':0,
                                     'position':'fixed',
                                     'left':-1000})
                               .appendTo($('body'));   

        // Set the max font size for the clone to fit the max height; 
        var fontSize = minFontSize;
        do {
            $(this).css('font-size', fontSize+'px');
            fontSize=fontSize+1;
            clone.css('font-size', fontSize+'px');
        } while (h > clone.height() && maxFontSize > fontSize) ;

        // Set the '...' if still bigger 
        //start by setting back the good size to the clone.
        fontSize=fontSize-1;
        clone.css('font-size', fontSize+'px');

        // while max-height still bigger than clone height
        if (h < clone.height() && minFontSize == fontSize) {
            var content = clone.html();
            // try to remove the last words, one by one.
            while (h < clone.height()) {
                content = content.replace(/(\s[^\s]*)$/g,'...');
                clone.html(content);
            }
            // then replace the #text content
            $(this).html(clone.html());
        }

        // then remove the clone
        clone.remove();

        this.running = false;
    }
})
.trigger('resize');

Answer 3

有一个跨浏览器（IE9 +）css居中的文字，并为webkit codepen加上连字符：

HTML：

<div class="box">
  <p>
     You can also position your element only in the vertical or horizontal. 
     This work in IE9+. This text can be also hyphenated.
  </p>
</div>

CSS：

.box {
  border: #3071a9 solid 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #222;
  font-size: 26px;
  font-family: arial;
  height: 50%;
  padding: 20px;
  width: 50%;
}
.box p {
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
  overflow: hidden;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

Answer 4

Russ Painter的Jquery Textfill Plugin可以派上用场。

这是Fiddle。

 <div>
  <div>
    <label for="dyntext">Content:</label>
    <input type="text" id="dyntext" value="Hello!"></input>
  </div>
  <div>
    <label for="maxsize">Maximal font size in pixels?</label>
    <input type="text" id="maxsize" value="0"></input>
  </div>
  <hr />
  <div class="content">
    <div class="jtextfill">
      <span class="dyntextval">Hello!</span>
    </div>
  </div>

function update() {
  var size = parseInt($('#maxsize').val(), 10);
  if (!isNaN(size)) {
  $('.dyntextval').html($('#dyntext').val());
  $('.jtextfill').textfill({debug: true, maxFontPixels: size});
  }
}

$(function () {
  $('#maxsize').keyup(update);
  $('#dyntext').keyup(update);
  update()
});


.content .jtextfill {
 width: 150px;
 height: 100px;
 background-color: #fff;
 text-align: center;
 border:1px solid #333;
 padding-top:40px;
 padding-bottom:40px;
 }

Answer 5

中间部分非常简单，你可以使用flexbox，display：table-cell等来实现这个目标

字体大小部分很棘手，但过去已在此处回答：https://stackoverflow.com/a/6112914/1877754

居中并调整内容大小

5 个答案: