如何使文本适合 div 并做出响应？ [复制]答案

【问题标题】：How to make a text fit in a div and be responsive? [duplicate]如何使文本适合 div 并做出响应？ [复制]
【发布时间】：2021-12-14 07:25:09
【问题描述】：

我的代码是这样的：

.container .aciklama2{
    text-align: center;
    font-family: 'Roboto', sans-serif ;
    font-size: 10;
    color: blanchedalmond;
    background-color: black;
    width:25%;
    height:280px;
    white-space: pre-line;
    float:left;
}

外观是这样的：

enter image description here 我无法使文本响应并适合 div 我该怎么做？

【问题讨论】：

移动端显示吗？
您是否希望文本适合 div - 也就是说，由于 div 的尺寸是固定的，您希望文本更改大小以使其始终适合。或者您是否希望文本大小保持不变和 div 一样改变它的尺寸，让所有的文字都在里面？听起来你想要第一个，但到目前为止所有的答案都假设是第二个。

标签： html css responsive

【解决方案1】：

您已为 div 设置了默认高度。将height: 280px; 更改为min-height: 280px;

如果您这样做，则 div 将始终保持至少 280 像素的高度。但是如果文本太多，div 的高度会增加，这样文本就可以放进去。

我希望我能帮助你解决这个问题。 :)

【讨论】：

你错过了这个问题。问题是响应地调整文本大小以适应某个元素。不要调整元素的大小以适应文本。

【解决方案2】：

您应该删除 Css 上固定的 height 属性。必要时使用 min-height 替换。

.content{
  text-align: center;
  font-family: 'Roboto', sans-serif ;
  font-size: 10;
  color: blanchedalmond;
  background-color: black;
  width:25%;
  min-height:280px;
  white-space: pre-line;
  float:left;
}

<div class="content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit ipsa, aliquid vero facilis beatae expedita, eaque cumque iste neque, tenetur quos molestias minus officiis maxime reprehenderit illo nam architecto. Corrupti.
Officia laudantium cumque error consequatur! Animi nam obcaecati doloribus? Inventore, laudantium. Ipsam repudiandae facilis minima molestiae officia ab porro dolorem earum mollitia eius. Nam nulla laudantium unde et nemo quod.
Est accusamus delectus quibusdam quasi, similique voluptatem. Sit ducimus cupiditate praesentium magnam nostrum veniam consequatur non, a perferendis recusandae aperiam accusamus vero maxime doloremque. Eveniet rerum sint saepe est! Architecto?
Itaque deserunt, minima consequatur dolores voluptas accusamus distinctio aliquid quas obcaecati. Repellendus labore fugiat dolor corrupti aperiam, nemo sunt quod! Debitis quod esse voluptatem voluptates quo sint nam cum explicabo.
Consequatur cumque incidunt cupiditate veritatis vitae dicta mollitia molestiae! Iure, eos vel sapiente beatae cumque nobis soluta magnam quae! Odit, nemo adipisci eaque expedita eligendi cum ullam ipsum provident beatae.</div>

【讨论】：