如何让 div [box] 响应其中的文本
[英]How to have a div [box] as responsive with text in it
问题描述
我想要的是文本框 class 应该是响应式的，所以当我更改宽度时，宽度和高度将与正方形相同，并且文本会相对于它发生变化，因此文本不会出现文本框。 如您所见，当您更改宽度时，文本框已经从浮动框和容器中出来了。 感谢您的帮助，这意味着很多。
.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 个解决方案
解决方案1
1 已采纳 2021-03-04 12:03:43
检查它是否适合您。
.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>
如果您不想滚动文本，只需注释掉overflow: scroll并用overflow: hidden在class text-box
如何在div中制作响应式文本？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.