如何根据文本长度调整div高度大小

Question

我正在尝试创建一个根据文本长度调整其高度的框。我一直试图改变高度（自动等）或溢出，但我不太确定我做错了什么。非常感谢任何帮助！

以下是目前情况的图片：

编辑：JS Fiddle - 溢出设置为隐藏，最小高度设置为50px但div仍未调整。 我只希望div高度调整为内容而不是宽度

以下是我的代码：

.article-item-overlay {
  display: inline-block;
  height: inherit;
  margin: 190px;
  margin-left: 20%;
  margin-right: 20%;
  padding-top: 0;
  padding-bottom: 40px;
  position: relative;
  width: 60%;
  background: #fff;
  border: 1px solid #000;
}
.text-center {
  text-align: center;
}
.article-item-date-wrapper {
  position: absolute;
  bottom: -23px;
  text-align: center;
  width: 100%;
}
.article-item-date {
  margin: 0;
  font-size: 7pt;
  font-family: 'Rock Salt', cursive;
  color: rgba(255, 255, 255, .75);
  background: #000;
  height: 35px;
  line-height: 35px;
  padding: 0 18px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.article-item-title {
  padding: 20px;
  text-align: center;
  font-family: 'Lato', sans-serif;
  letter-spacing: .1em;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  font-size: 13px;
  line-height: 2.0;
  overflow: inherit;
}

<div class="article-item-overlay text-center">

  <div class="article-item-date-wrapper">

    <div class="article-item-date">TITLE</div>

  </div>

  <h3 class="article-item-title">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</h3>

</div>

Answer 1

  

我正在尝试创建一个根据文本长度调整其高度的框。

这是默认行为，除非你做一些改变它。

在这种情况下，您需要删除display: -webkit-box属性。此属性值已过时。你有什么打算做的？您未能在发布的代码中包含该内容。

您可以通过逐个关闭.article-item-title中的属性来轻松调试此内容。

Answer 2

你想要这个像jsbin链接中的输出检查

Link to jsbin

public class Book{
   private title;
   private author;

   //implement hashcode

   public boolean equals(Object o) {
      if (!(o instanceof Book)){ return false}
      Book that = Book.class.cast(o);
      // you may want to do a null check here
      return this.title.equals(that.title) && this.author.equals(that.author);
   }

}

 public class Library {
    private ArrayList<Book>libraryBooks;
     public int checkNumCopies(String title,String author){
        return libraryBooks.size() - new HashSet(libraryBooks).size()
     }
 }

.article-item-overlay {
  display: inline-block;
  height: inherit;
  margin: 190px;
  margin-left: 20%;
  margin-right: 20%;
  padding-top: 0;
  padding-bottom: 40px;
  position: relative;
  width: 60%;
  background: #fff;
  border: 1px solid #000;
}
.text-center {
  text-align: center;
}
.article-item-date-wrapper {
  position: absolute;
  bottom: -23px;
  text-align: center;
  width: 100%;
}
.article-item-date {
  margin: 0;
  font-size: 7pt;
  font-family: 'Rock Salt', cursive;
  color: rgba(255, 255, 255, .75);
  background: #000;
  height: 35px;
  line-height: 35px;
  padding: 0 18px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.article-item-title {
  padding: 10px;
  text-align: center;
  font-family: 'Lato', sans-serif;
  letter-spacing: .1em;
  display: absolute;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  font-size: 13px;
  line-height: 2.0;
  overflow: auto;
  border: 1px solid black;
}