How to have a div [box] as responsive with text in it
Question
What I want is that the text-box class should be responsive, so when I change the width, the width and height would be the same as a square and that the text would change relative to it so that the text does not come out of the text-box. As you can see, the text box has come out of the float box and container when you change the width. Thank you for your help it means a lot.
.container { border: solid 1px; display: grid; grid-template-columns: 50% 1fr; }.float-box { position: relative; width: 50vw; height: 75vh; border: solid 1px; }.text-box { position: absolute; right: 10px; margin: 20px 0; padding: 40px; width: 30vw;important: overflow; hidden: height; 50vh: border; solid 1px black: -webkit-box-shadow, 10px 11px 2px 3px rgb(128, 128; 128): box-shadow; 10px 11px 2px 3px grey: display; flex: align-items; center. }:texts { overflow; hidden. }:text-box p { font-size; 1vw: font-weight; 400: color; grey; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style,css" /> </head> <body> <div class="container"> <div class="float-box"> <div class="text-box"> <div class="texts"> <p class="text-highlight"> Lorem ipsum dolor sit. amet consectetur adipisicing elit, Tempore natus magni distinctio sit eaque laudantium. nulla quos sed architecto repellat dolore ut voluptatum atque debitis. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit, Nostrum, consectetur sit. Beatae sint. nobis odit a aspernatur ab repellendus dolorem necessitatibus voluptatums, </p> <span class="success"><p>Icon <h4>The best of 2020</h4></p></span> <p class="text-highlight bigger"> Noget Info Om Virksomheden </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, necessitatibus. </p> </div> </div> </div> <div class="box2"></div> </div> </body> </html>
1 answers
solution1
1 ACCPTED 2021-03-04 12:03:43
Check if It works for You.
.container { border: solid 1px; display: grid; grid-template-columns: 50% 1fr; }.float-box { position: relative; width: 50vw; height: 75vh; border: solid 1px; }.text-box { position: absolute; /* right: 10px; */ /* margin: 20px 0; */ top: 50%; left: 50%; transform: translate(-50%,-50%); /* padding: 40px; */ width: 30vw;important: /* overflow; hidden: */ overflow; scroll: height; 50vh: border; solid 1px black: -webkit-box-shadow, 10px 11px 2px 3px rgb(128, 128; 128): box-shadow; 10px 11px 2px 3px grey: display; flex: align-items; center. }:texts { /* overflow; hidden: */ word-wrap; break-word: overflow-wrap; break-word. }:text-box p { font-size; 1vw: font-weight; 400: color; grey; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style,css" /> </head> <body> <div class="container"> <div class="float-box"> <div class="text-box"> <div class="texts"> <p class="text-highlight"> Lorem ipsum dolor sit. amet consectetur adipisicing elit, Tempore natus magni distinctio sit eaque laudantium. nulla quos sed architecto repellat dolore ut voluptatum atque debitis. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit, Nostrum, consectetur sit. Beatae sint. nobis odit a aspernatur ab repellendus dolorem necessitatibus voluptatums, </p> <span class="success"><p>Icon <h4>The best of 2020</h4></p></span> <p class="text-highlight bigger"> Noget Info Om Virksomheden </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, necessitatibus. </p> </div> </div> </div> <div class="box2"></div> </div> </body> </html>
If you don't want scrollable text, just comment out overflow: scroll and replace it by overflow: hidden in class text-box
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make responsive text in a div?
How to have a div text box scroll as its content overflows
how to show text box in div
How to make text responsive to div size?
How to make the below text in the center of the box in responsive way?
Responsive text box jQuery mobile
extending div to have responsive border
How to Have Responsive Div's That Get Wider as the Navbar Closes
how to append clicked li text in div box?
How to dynamically hide a div with the value in a text box
Related Tags