How do I make the text fit the size of the div?

First, I suggest reading about the units of measure in W3 css: CSS: in, px, ct, cm, etc

You can use a unit of measure that is proportional to size. For this you can use the unit vw or viewport width , which is relative to what can be seen according to the size (width), ie will vary according to size.

Example: font-size: 3vw

To document, 1vw is equivalent to 1/100 (one-hundredth) of the viewport size of the screen.

Another way is to use media queries (more information here in Mozilla: Media Queries ).

You can use media query to define a specific size according to resolution, which is a good option as well. Basically you define a "standard" size and adjust the size according to the resolution, for example using the em unit of measure.

Example:

body {
  font-size: 14px;
}
@media (max-width: 1200px) {
  body { font-size: 1.2em; }
}
@media (max-width: 768px) {
  body { font-size: 1.1; }
}
@media (max-width: 468px) {
  body { font-size: 1em; }
}

What I will comment on here is just the tip of iceberg

To understand better, I recommend reading these two articles! link and link

In these articles you will see that there is an approach that arrives at this result:

AndIwouldgivethisresult:

TheCSSbaselinemodelforflowtypographyaccordingtoSmashingMagazine's Michael Riethmuller article would look like this: / p>

/* Older browsers */
html { font-size: 16px; }

/* Modern browsers only need this one */

@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

/* Safari <8 and IE <11 */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
@media screen and (min-width: 50em){

html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

Putting the text simply into vw , viewport width You would have this result, and would need a @media treatment to not make the text too small when the screen is too narrow .. .

Notice that the line never breaks, but the size becomes very small, because it is in proportion the width of viewport

Example:

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
div {
	width: 100%;
	height: 100%;
}
p {
	font-size: 1vw;
	margin: 0;
}

	<div>
		<p>
			Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, facilis optio cupiditate ducimus animi ea quidem odit eum error corrupti ratione impedit illo sed nesciunt culpa velit repellendus eius, praesentium est quasi! Nobis ab magnam, laudantium obcaecati voluptatibus esse. Impedit repudiandae temporibus molestias cum dolorum ipsum qui, voluptates accusantium expedita esse cumque fuga earum cupiditate excepturi in eos ad, nihil commodi quae aspernatur itaque! Fuga distinctio autem nulla, accusamus minus hic obcaecati tempora accusantium consectetur! Vitae, in distinctio ipsum sint laudantium beatae natus, inventore, nam aspernatur explicabo quo accusantium quia quam quibusdam. Cumque voluptate excepturi culpa dolor pariatur nostrum, possimus impedit eum modi. Impedit dignissimos nesciunt quia iure beatae tempore suscipit ipsam, asperiores harum ullam facilis labore assumenda debitis quae eum ut corrupti ad, recusandae dolorum delectus, repellendus deleniti dolore? Culpa rerum vitae accusantium saepe, pariatur similique quam quia aspernatur nemo inventore atque quos, laudantium at ipsam earum. Officia ab beatae rem cumque eaque ea debitis, veniam corporis voluptatum doloremque. Est et numquam tenetur beatae facere a cumque, necessitatibus deserunt veritatis at adipisci in voluptatem eaque sunt aliquam iure maxime doloremque quam tempora. Sapiente quibusdam, blanditiis accusamus sequi quam autem consequuntur earum praesentium eveniet. Eum corporis perspiciatis veniam at excepturi.
		</p>
	</div>