如何让div内的文本适配容器并实现响应式展示

你的原有代码存在几个影响文本适配的问题，修改方案如下： #

核心问题说明 #

• 字体属性未指定单位：font-size: 10 属于无效属性，浏览器会默认使用继承字号，导致文本尺寸不受控
• 固定高度+百分比宽度的组合，在屏幕宽度收缩时，容器宽度变小但高度固定，文本自然会溢出容器
• 没有配置响应式字号规则和文本断行规则

修复后的代码 #

.container .aciklama2{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    /* 用clamp实现响应式字号：最小10px，跟随屏幕宽度缩放，最大16px */
    font-size: clamp(10px, 2vw, 16px);
    color: blanchedalmond;
    background-color: black;
    width:25%;
    /* 替换固定高度为最小高度，适配内容长度，需固定高度可保留height并加overflow配置 */
    min-height: 280px;
    white-space: pre-line;
    float: left;
    /* 增加内边距避免文本贴边 */
    padding: 12px;
    /* 自动断词，避免长字符横向溢出 */
    word-break: break-word;
    /* 盒模型修正，保证内边距不会撑大25%的宽度设置 */
    box-sizing: border-box;
    /* 若需保留固定280px高度，可开启下方配置让溢出内容可滚动 */
    /* overflow-y: auto; */
}

关键配置说明 #

• clamp() 函数可以实现字号跟随屏幕宽度动态调整，适配不同尺寸的设备
• box-sizing: border-box 保证你设置的25%宽度包含内边距和边框，不会出现容器宽度超过预期的问题
• word-break: break-word 会自动截断过长的连续字符换行，避免横向滚动条出现
• 用min-height替代固定高度后，容器会自适应文本长度，不会出现内容被截断的问题

内容的提问来源于stack exchange，提问作者PhysicsEnginering