1. 首页
  2. 问答
  3. 如何动态更改字体大小以便始终适合其父容器

如何动态更改字体大小以便始终适合其父容器

2017-07-06 93 views
3

在我的博客中，帖子的标题显示在视频在后台播放的div上。有时博客的标题是2个字，有时候是20个字以上。在后一种情况下，文本可能会从视频播放的父容器溢出。如何动态更改字体大小以便始终适合其父容器

我不想隐藏溢出的材质或使用滚动条或任何“...”。我正在寻找的解决方案是动态调整字体大小，如果文本溢出，以便它适合任何视口中的其父div。

下面是代码：https://codepen.io/anon/pen/QgBZqd

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <title>SINEMACERA</title> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    <link href="https://fonts.googleapis.com/css?family=Anton|Cabin" rel="stylesheet"> 
</head> 
<body> 

<!--NAVBAR STARTS--> 

<nav class="navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">SINEMACERA</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 

     <li class="active"><a href="#">Anasayfa</a></li> 


     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Hakkımda</a></li> 
     <li><a href="#">İletişim</a></li> 

     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div> 
</nav> 

<!--NAVBAR ENDS--> 

<div id="COVERPHOTO"> 

    <div id="COVER"> 
     <h1 id="COVERTEXT">A TEXT SO LONG THAT IT CAN NOT FIT INTO THE PARENT DIV CONTAINER AND MIXES UP WITH THE BLOG, HENCE IT BECOMES UNAESTHETIC. THIS TEXT COULD HAVE BEEN EVEN LONGER AND LONGER</h1> 
     <video autoplay loop id="video-background" muted plays-inline> 
     <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4"> 
     </video> 
     </div> 
    </div> 

<div class="container"> 
    <div class="row"> 
    <div id="MAJORCONTENT"> 

     <div class="col-lg-12"> 
<h1>Lorem Ipsum Üzerine</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<span class="readmore"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</span> 
<button type="button" class="btn btn-primary wide-button">Devamını oku!</button> 
</div> 

     <div class="col-lg-12"> 
<h1>Lorem Ipsum Üzerine</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<span class="readmore"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</span> 
<button type="button" class="btn btn-primary wide-button">Devamını oku!</button> 
</div> 

<div class="col-lg-12"> 
<h1>Lorem Ipsum Üzerine</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<span class="readmore"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</span> 
<button type="button" class="btn btn-primary wide-button">Devamını oku!</button>  
</div> 

</div> 
    </div> 
</div> 

    <script 
    src="https://code.jquery.com/jquery-3.2.1.js" 
    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
    crossorigin="anonymous"></script> 

    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="sinemacera.js"></script> 
</body> 
</html>

CSS

body { 
    background: black; 
    color:white; 
    font-family: Cabin; 
} 

.wide-button { 
    width:100%; 
} 


h1 { 
    text-align: center; 
    text-shadow: 0px 2px 10px rgba(255, 255, 255, 0.4) 

} 


.row { 
    float:left; 
} 

.readmore { 
    display:none; 
} 


#COVERPHOTO { 
    margin-top: 50px; 
} 

#COVER { 
    opacity:0; 
    position: relative; 
    font-size: 40px; 
    text-align: center; 
} 


#COVERTEXT { 
    opacity: 0; 
    margin:0; 
    font-family: Anton; 
     font-size: 10vw; 


    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.7), 
      0px 8px 13px rgba(0, 0, 0, 0.3), 
      0px 18px 23px rgba(0, 0, 0,0.3); 
    position: absolute; 
    top:50%;     
    left:0; 
    right: 0; 

    transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: -moz-translateY(-50%); 
       } 


#MAJORCONTENT { 
text-align: justify; 
font-size: 1.5em; 
margin-bottom: 5%; 
} 

video { 
    width:100%; 
    height: auto; 
} 

.container:nth-of-type(2) { 
    padding-bottom: 1%; 
}

JS

$(".btn-primary").click(function() { 

var thisBTN = $(this); 
var RM = $(this).prev(); 

RM.slideToggle(1000, function() { 
    thisBTN.toggleClass("btn-info") 
    if(thisBTN.text()==="Küçült") { 
     thisBTN.text("Devamını oku"); 
    } 
    else { 
     thisBTN.text("Küçült") 
    } 
}); 
}); 

    $("#COVER").fadeTo(400,1); 
    $("#COVERTEXT").delay(600).fadeTo(500,0.5);

来源

2017-07-06 user112529

+0

我发现这一点：https://stackoverflow.com/questions/18229230/dynamically-changing-the-size-of-font-size-based-on-text-length- using-css-and-ht – Steve

+0

我不知道如何使用CSS，但可以读取JS中的文本长度，并创建一些类来处理字符长度范围并将类指定给元素当页面加载https://codepen.io/anon/pen/bRjPYa –

回答

0

您可以在CSS the vh unit使用：

font-size: 20vh;

来源

2017-07-06 19:55:35 RORSCHACH

+0

尝试用vw和vh。这个伎俩也没有。上面的代码还包括字体大小：10vw – user112529

+0

所以，也许你必须清理缓存 – RORSCHACH

0

我前几天在摆弄，发现我曾为此做过一次解决。

Node.prototype.fitText = function(maxSize) { 
 
    maxSize = maxSize || 500; 
 
    this.style.whiteSpace = "nowrap"; 
 
    this.style.overflow = "scroll"; 
 
    this.style.fontSize = maxSize + "px"; 
 

 
    while (this.scrollWidth > this.clientWidth) { 
 
    this.style.fontSize = --maxSize + "px"; 
 
    } 
 
} 
 

 
document.querySelector('.container').fitText();
<div class="container"> 
 
    Text To Fit 
 
</div>

来源

2017-07-06 19:56:41 Will

相关问题

 相关问题