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

更新

还有一个问题。只能通过右下角调整div的大小，而不能使用col-resize句柄在右边框的任何位置进行调整。如何解决？

Answer 1

请从边距中删除“自动”，并使其仅在右侧扩展，将方向设为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;
}

Answer 2

尝试此操作，只需要添加另一个div且母div包含边距：50px自动；

.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 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>

我只是在div中为您的margin css属性添加注释

我希望这可以消除您对此问题的困惑。

谢谢...

Answer 4

我将css属性设置为自动溢出，因此它工作正常。对于第二个问题：使用 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

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

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

5 个答案: