jQuery UI 可调整大小：防止高度小于文本

Question

我有一个带文本的可调整大小的 DIV。我只操作宽度，高度应该自动调整，但不能比文本（内容）更小。如何实现？

我的代码：

HTML:

<div id="block">
  sadfasda asfasfasf asfafafaf a a a fasfas fasfafasfaf
  asffasdf as fasfasfa sfasfafasfaf akflj jalj faldjfajf'a
  klasdjf lka;sjfajf ljasfljaflkj f jf  f jfaj flajklfjalfj
  klasjf  f lkajfajf lajf lajf al alfjasl jall fafasff
</div>

CSS:

#block {border: 1px solid red; width: 300px; height: auto; padding: 5px}

JS:

$("#block").resizable({
    maxWidth: 500,
    minWidth: 115
});

Here the DEMO

- soonic

---

将min-height设置为与文本相同并不容易，因为当您调整宽度时，min-height也会改变。最好使用overflow或类似的东西来解决。 - Marcos Pérez Gude

Answer 1

一个解决方法是使用这样的容器，它可以将您的容器控制住 :)

编辑: 哦不.. 当你把它变小时它不起作用.. 让我看看

编辑2: 现在可以了！

jsFiddle

HTML

<div id="block">
  <div class="content">
    sadfasda asfasfasf asfafafaf a a a fasfas fasfafasfaf
    asffasdf as fasfasfa sfasfafasfaf akflj jalj faldjfajf'a
    klasdjf lka;sjfajf ljasfljaflkj f jf  f jfaj flajklfjalfj
    klasjf  f lkajfajf lajf lajf al alfjasl jall fafasff
  </div>
</div>

JS

var block = $("#block");

block.resizable({
    maxWidth: 500,
    minWidth: 115,
    resize : function(e) {
      block.height(block.find('.content').height())
    }        
});

CSS（层叠样式表）

#block {
    border: 1px solid red; 
    width: 300px; 
    height: auto; 
    padding: 5px
}

- Poul Kruijt

---

@MarcosPérezGude 没错，如果你改变容器的宽度，而不使高度变小，你会看到它做了他想要的事情.. - Poul Kruijt

@MarcosPérezGude 我现在已经更新了我的fiddle。如果你比较一下我的fiddle和他的功能，我希望这就是他想要的..但也许我们永远不会知道:D - Poul Kruijt

这确实是一个含糊的问题。感谢您的点赞！按照您的建议进行操作，脚本需要进行微小的调整，检查高度是否小于容器，然后应用该高度 :) - Poul Kruijt

太棒了，@PierreDuc！ - Marcos Pérez Gude

非常感谢，如果我在帖子中没有表达得更清楚，我很抱歉，但这就是我期望的答案。它还激发了我扩展一下我的代码以满足我的后续需求，例如演示。 - soonic