如何强制文本溢出父div但留在视口内，仅超出视口时换行？

你之前给p设置的white-space: nowrap会强制所有文本不换行，才会导致超出视口后被截断。本次方案的核心逻辑是让父容器不再限制内部文本的最大布局宽度，同时把文本的换行边界设置为视口宽度，刚好匹配你的需求。

完整代码示例 #

<style>
/* 父容器样式 */
.parent-div {
  /* 若父容器原本有固定宽度，替换为min-width保证最小宽度不变，同时允许被内容撑宽 */
  min-width: 200px; /* 这里替换为你原来的div宽度值，没有固定宽度可以删除这行 */
  width: fit-content;
}
/* 内部文本标签样式 */
.parent-div p {
  /* 删掉你之前设置的white-space: nowrap */
  max-width: 100vw; /* 最大宽度等于视口宽度，超过就自动换行 */
  margin: 0; /* 可按需调整，避免默认margin影响宽度计算 */
  word-break: break-word; /* 兼容长单词、无空格文本的正常换行 */
}
</style>

<div class="parent-div">
   <p> text here 这里放置你的文本内容</p>
</div>

可选扩展配置 #

如果需要保留文本溢出时的省略号效果，可以在p标签的样式中补充以下属性：

overflow: hidden;
text-overflow: ellipsis;
/* 若需要最多展示N行，补充下面三行，把N替换为实际行数 */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

如果页面有全局的左右边距导致100vw计算不准，可以把max-width调整为calc(100vw - 左右边距总和)即可。

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