如何強制 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

類型調整大小：兩者； 不調整大小：水平。