可以使用CSS中的flex布局来实现这个效果,具体的代码示例如下:
HTML代码:
<div class="container">
<div class="t">
<p>这里是文本内容</p>
</div>
</div>
CSS代码:
.container {
display: flex;
}
.t {
flex: 1;
border: 1px solid #000;
padding: 10px;
}
p {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
在这个示例中,我们将需要进行调整的div.t放置在一个容器中,并使用了flex布局。通过给div.t设置flex: 1的属性,我们让其始终占满剩余的空间。同时我们对p标签设置了width: 100%的属性,让其始终与div.t的宽度相等,从而保证文本始终随着div.t的大小进行调整。在p标签上,我们还使用了一些基本的文本截断属性,来保证当文本太长时不会撑破div.t。
当div.t的大小改变时,其内部的文本也会自动进行调整,从而达到了“Make text in div always resize with div.t”的效果。