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

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等缩短了text-overflow 。但问题是，当您使用右侧的调整大小手柄调整此 div 的大小时，它也会在相反的方向上增加或减少，即向左手边。 我不想要这种行为。 相反，我希望 div 应该只在右手方向调整大小，而左手边只是停留在那里。 如何实现？

更新

还有一个问题。 div 只能通过右下角col-resize而不能在右边框的任何地方使用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>

Answer 2

请从边距中删除自动，并使其仅在右侧扩展，将方向设为 ltr。

因此，您的 CSS 将如下所示：

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

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

Answer 3

这是因为margin:50px auto; 这个css属性。 你的左右边距是自动的，所以它会让你的 div 居中到它的父级（因为这里的父级是 body）。 所以当你调整你的 div 大小时，它会增加你的 div 宽度，并且因为它是自动值，所以设置左右边距值相等。

如果您删除此属性，您的 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>

我只是将您的边距 css 属性的评论添加到 div

我希望这会消除您对这个问题的困惑。

谢谢...

Answer 4

我让 css 属性溢出到 auto ，所以它工作正常。 对于第二个问题：使用resize属性，div 将始终只能通过右下角（水平/垂直/两者）调整大小，并且不能在右边框的任何地方调整大小。

 .resizable_div { border: 1px solid red; white-space: nowrap; width: 100px; height: 50px; line-height: 50px; **overflow: auto;** 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>

Answer 5

类型调整大小：两者； 不调整大小：水平。