javascript - jquery ui resizable防止高度小于文本

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
});

这里是 DEMO

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
}