Wie man Text flexibel innerhalb div macht?

Ich möchte Text ändern, wie sich die Eltern-Div-Größe ändert. Wenn sich die Größe des übergeordneten div ändert, sollte der Text automatisch angepasst werden.Wie man Text flexibel innerhalb div macht?

Was ich will, ist den Text in einem Widget anpassen, wenn die Widget-Größe erhöhen oder verringern.

Im Moment bin Umgang ich dies mit @media Anfragen:

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

Quelle

2016-09-03 Abdulhaq Shah

Was ist falsch bei der Verwendung von Medienabfragen? – igorshmigor

Anders als Medienabfragen ist dies mit CSS nicht möglich. Dafür gibt es JS-Plugins. –

Das Problem mit Medienabfragen, dass es nur für den Medienbildschirm funktioniert. Was passiert, wenn Benutzer nur die Breite des Widgets für einen anderen Bildschirm ändern? Ich brauche ein paar JS-Plugins. –

Fiddle: https://jsfiddle.net/raskarvishal7/z8kdrqw7/

dies versuchen ..

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

Quelle

2016-09-03 08:33:27 Goku

Danke, aber es funktioniert nicht der Text bleibt gleich, wenn ich den Bildschirm auf Ihrem Code ändern. –

Angenommen, Sie meinen, passen Sie die Schriftgröße an, wenn Sie "den Text anpassen" sagen, dann machen Sie es richtig. Dies ist genau der Grund, warum Medienabfragen existieren.

Sie könnte tun es mit Javascript, aber ich würde es nicht empfehlen.

Quelle

2017-05-04 23:23:29

Wie man Text flexibel innerhalb div macht?

Antwort

Verwandte Themen