如何动态更改字体大小，使其始终适合其父容器
[英]How to change font-size dynamically so that it always fits into its parent container
问题描述
In my blog, the title of the posts are shown on a div where a video plays in the background. 
在我的博客中，帖子的标题显示在视频在后台播放的div上。 Sometimes the title of the blog is 2 words, sometimes it is more than 20 words. 有时博客的标题是2个单词，有时候超过20个单词。 And in the latter case, the text may overflow from its parent container where the video plays. 在后一种情况下，文本可能会从其播放视频的父容器中溢出。
I do not want to hide the overflown material or use a scrollbar or any "...". 我不想隐藏溢出的材料或使用滚动条或任何“......”。 The solution I am looking for is resizing the font dynamically if the text overflows so that it fits exactly to its parent div in any viewport. 我正在寻找的解决方案是动态调整字体大小，如果文本溢出，以便它在任何视口中完全适合其父div。
Here is the code: https://codepen.io/anon/pen/QgBZqd 这是代码： 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 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 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);
2 个解决方案
解决方案1
0 2017-07-06 19:55:35
你可以在css中使用vh单位 ：
font-size: 20vh;
解决方案2
0 2017-07-06 19:56:41
I was fiddling around the other day and discovered I made a solution to this once. 前几天我正在摆弄，发现我曾经解决过这个问题。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何更改 JS 中的字体大小以适应其容器？ - How to change the font-size in JS to fit its container?
如何在调整大小时更改字体大小以适合其父框？ - How to change the font-size on resize to fit its parent box?
d3条形图-如何自动更改值的字体大小以使其适合条形 - d3 bar chart- How do I automatically change font-size of value so that it fits within bar
动态更改字体大小以使文本适合容器 - Dynamically change font-size to fit text into container
根据父容器检查文本元素的宽度（基于字体大小） - Checking a text element's width (based on font-size) against its parent container
如何在JointJs中动态设置字体大小？ - How to set font-size dynamically in JointJs?
控制字体大小，以便尽可能多地填充容器 - Control font-size so that it fills container as much as possible
动态更改font-family和font-size - Dynamically change font-family and font-size
如何更改innerHTML上的字体大小 - How to change font-size on innerHTML
如何在Firefox浏览器中更改字体大小 - How to change font-size in Firefox Browser
相关标签