text-indent属性通过设置首行缩进影响换行，过大值会减少可用宽度导致文本换行，如容器宽200px时设180px缩进易触发换行；负值结合padding-left可实现悬挂缩进，如text-indent:-20px与padding-left:20px使首行左移、其余行右移；该属性仅对块级或inline-block元素有效，行内元素需转换显示类型才生效；JavaScript可通过屏幕宽度动态计算缩进值并实时调整，如监听页面加载与窗口变化事件实现响应式缩进。
简单来说，CSS 中的
text-indent属性会影响段落首行的缩进，进而间接影响换行。如果缩进值过大，可能会导致某些内容被挤到下一行。
解决方案：
text-indent属性用于指定文本块中首行文本的缩进。它接受各种长度单位（如 px, em, rem）或百分比值。
p {
text-indent: 2em; /* 首行缩进 2 个 em 单位 */
}
.indent-percentage {
text-indent: 10%; /* 首行缩进父元素宽度的 10% */
}如果
text-indent的值很大，可能会导致首行实际可用的空间变小，使得原本可以在一行内显示的文本被迫换行。这通常发生在容器宽度有限，且缩进值接近或超过容器宽度的情况下。
立即学习“前端免费学习笔记（深入）”；
例如：
This is a long sentence that might wrap.
在这个例子中，如果
p元素的父容器宽度只有 200px，那么 180px 的缩进几乎占据了整个宽度，
This is a long sentence极有可能发生换行。
如何使用负值 text-indent 创建悬挂缩进？
使用负值
text-indent可以创建悬挂缩进效果，即首行突出显示，后续行缩进。结合
padding-left使用，可以实现更精细的控制。
.hanging-indent {
text-indent: -20px;
padding-left: 20px;
}这里，
text-indent: -20px将首行向左移动 20px，而
padding-left: 20px则将整个文本块（包括首行之后的行）向右移动 20px。最终效果是首行左移，形成悬挂的效果。
text-indent 对不同 display 类型的元素有什么影响？
text-indent主要影响块级元素（如
p,
div）的首行文本。对于行内元素（如
span,
a），
text-indent通常没有效果，除非这些行内元素被设置为
display: inline-block或
display: block。
对于
display: inline-block元素，
text-indent只会影响该元素内部的首行文本。对于
display: block元素，
text-indent的行为与普通块级元素相同。
考虑以下例子：
This is a span element. This is an inline-block span element.
第一个
span元素上的
text-indent不会产生任何效果，因为它是默认的行内元素。第二个
span元素设置为
inline-block后，
text-indent会使其内部的首行文本缩进。
如何用 JavaScript 动态调整 text-indent？
有时候，可能需要根据用户的屏幕尺寸或设备方向动态调整
text-indent的值。这可以通过 JavaScript 来实现。
function adjustTextIndent() {
const element = document.getElementById('myParagraph');
const screenWidth = window.innerWidth;
const indentValue = screenWidth * 0.05; // 缩进值为屏幕宽度的 5%
element.style.textIndent = indentValue + 'px';
}
// 在页面加载和窗口大小改变时调用
window.onload = adjustTextIndent;
window.onresize = adjustTextIndent;这段代码首先获取屏幕宽度，然后计算出一个基于屏幕宽度的缩进值，并将其应用到指定元素的
text-indent属性上。通过监听
window.onload和
window.onresize事件，可以确保在页面加载和窗口大小改变时都执行调整。
