html - HTML中是否可以根据父元素宽度设置子元素宽度？

Question

我有

HTML 文件

  <div>
    <p class="ellipsis"> Some randomly generated text</p>
  </div>

少（CSS）文件

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

我需要我的段落宽度不超过父 div 宽度。父 div 宽度基于浏览器窗口。所以它可能会一直改变。随机生成的文本也可以是 1 到 1000 个符号。

Answer 1

这就是你想要的？小提琴

如您所见，是一种“响应式”解决方案。

CSS

.ellipsis {
    word-wrap: break-word;
    border: 1px solid black; /* This is not required. Is only for seeing the box */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

• word-wrap: break-word;“用于“告诉”浏览器在单词中换行，以防止在其他不可破坏的字符串太长而无法放入其包含框时溢出。” - 检查这篇MDN 文章。

尝试调整小提琴中的“结果面板”的大小，您会看到文本被限制为“父母的宽度”。

干杯，狮子座！