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

Question

我有

HTML文件

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

LESS（CSS）文件

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

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

Answer 1

这是你想要的？的 Fiddle

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

<强> 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 article 。

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

干杯， 利奥！