jquery - 如何在 CSS/jQuery 中强制一个 div 仅在一个方向上扩展或调整大小

Question

我正在研究 <div>可水平调整大小，其中的文本将根据其容器宽度进行修剪。

.resizable_div {
  border: 1px solid red;
  white-space: nowrap;
  width: 100px;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 50px auto;
  padding: 5px;
  resize: horizontal;
  cursor: col-resize;
  min-width: 50px;
  max-width: 150px;
}

<div class="resizable_div">This is an example</div>

您可以看到 div 框可以水平调整大小并且使用 text-overflow 缩短了文本等等 但问题是，当您使用右侧的调整大小 handle 调整此 div 的大小时，它也会向相反的方向增加或减少，即左侧。我不想要这种行为。相反，我希望 div 应该通过仅向右手方向移动来调整大小，而左侧则保持在那里。如何实现？

更新

还有一个问题。 div 只能通过右下角调整大小，不能通过 col-resize 调整大小。处理右边界上的任何地方。如何解决？

Answer 1

试试这个，只需要添加另一个 div 和母 div 包含 margin: 50px auto;

.mother {
    padding: 20px;
    resize: both;
    width: 300px;
    margin: 50px auto;
    position: relative;
}

.child{
    border: 2px solid;
    padding: 20px;
    resize: both;
    overflow: hidden;
    position: absolute;
    left: 0;
}

<div class="mother">
	<div class="child">
     <p>Let the user resize both the height and the width of this div element.</p>
   <p>To resize: Click and drag the bottom right corner of this div element.</p>
   </div>
</div>