[英]How to stop the text to change(flexible Padding) inside div while width and height are being decreased
[英]How to make text flexible inside div?
我想随着其父div大小的更改来更改文本。 随着父div大小的更改,文本应自动调整。
我想要的是在小部件尺寸增加或减小时调整小部件中的文本。
现在,我正在使用@media查询来处理此问题:
@media (min-width: 768px) and (max-width: 1440px) {
.widget-header-title{
background-color:white;
border-bottom:1px solid #F0EEF0 !important;
font-weight:200;
font-size:22px;
color:black;
text-align:center;
}
/*For time widget Only*/
.ticketSummaryTime {
font-weight: bold !important;
font-size: 165px !important;
text-align: center !important;
}
/*For time widget Only*/
.ticketSummary {
font-weight: bold;
font-size: 180px;
text-align: center;
margin-top: 75px;
}
.widget-bottom-status{
font-weight:200;
padding:5px;
margin-top:30px;
font-size:12px;
color:grey;
text-align:center;
border-top:1px solid #F0EEF0 ;
}
}
小提琴: https : //jsfiddle.net/raskarvishal7/z8kdrqw7/
尝试这个..
HTML:
<div class="wrapper">
<div class="leftimg">
<span>I am an image</span>
</div>
<div class="rightside">
<div class="project-title">
<h1>I Am Main Title</h1>
<h2>Sub title<h2>
</div>
<div class="context">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
</div>
CSS:
.wrapper {
/* position: absolute; <-- You probably do not need this... */
max-width: 1200px;
width: 100%;
margin-left: 10px;
background: #3c3c3c;
overflow: auto; /* If you want the background color to show under all the image */
}
.leftimg {
width: 300px;
height: 600px;
background: #8cceff;
float: left;
}
.rightside {
background: #F96;
overflow: auto;
}
.project-title {
font-family: 'Abel';
color: #FFF;
margin-left: 40px;
font-weight: 300;
}
.project-title h1 {
font-size: 2.5rem;
}
.project-title h2 {
font-size: 1.4em;
}
.context {
color: rgba(255, 255, 255, 0.7);
margin: 20px 0 0 40px;
}
.context p {
font-size: 1.06rem;
line-height: 1.6rem;
font-family: 'Roboto Condensed';
font-weight: 300;
}
假设您说“调整文本”时调整字体大小,则说明您做得正确。 这正是存在媒体查询的原因。
您可以使用javascript 来做到这一点,但我不建议您这样做。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.