1. 首頁
  2. 問答
  3. 如何動態更改字體大小以便始終適合其父容器

如何動態更改字體大小以便始終適合其父容器

2017-07-06 96 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

相關問題

 相關問題