如何根据 css 中的内容更改块的大小？答案

【问题标题】：How can change the size of the block depending of its content in css?如何根据 css 中的内容更改块的大小？
【发布时间】：2016-12-31 17:07:20
【问题描述】：

我想创建一个盒子，它可以根据内容的长度改变其宽度和高度。所以如果它只有一条线，它应该有一个更小的高度。如果它有 10 行，它应该有更大的高度。我也想让盒子居中。先感谢您。我已经有了这个代码：

<div style=" border: 1px solid black; margin-left: auto; margin-right: auto; max-height: 25em; max-width: 20em; min-height: 10em; min-width: 12em; position: relative; white-space: nowrap">
<img src="https://4.bp.blogspot.com/-4wmRO867-W4/V7qwJGfVBYI/AAAAAAAAAL0/XQHdOxK34asRSXt3FfBKnOS_wGRcneFEwCEw/s1600/quote_basic.png" style="border: none; clear: left; float: left; position: relative;" />
<span style="font-style: italic; left: 50%; margin-right: -50%; margin: 0; position: absolute; text-align: center; top: 50%; transform: translate(-50% , -50%); display: inline-block;"> "This is the one-line content" </span>
<img src="https://4.bp.blogspot.com/-kg4kc90TSqs/V7rjthACJLI/AAAAAAAAAMM/sV7buqkUWH8KqYfBVlCGnq14qMdo4eetwCLcB/s1600/quote_basic_mirrored.png" style="border: none; clear: right; float: right;position: relative; top: 8em" />
</div>

【问题讨论】：

标签： html css height size width

【解决方案1】：

我想创建一个盒子，它可以根据内容的长度改变其宽度和高度。

display:inline-block 将完成大部分工作。唯一需要注意的是，盒子会不断变宽，直到达到其父级的 100% 宽度。

在此之前强制中断文本的唯一方法是应用width 或max-width

body {
  text-align: center;
}
blockquote {
  position: relative;
  padding: 30px 60px;
  text-align: center;
  font-size: 20px;
  display: inline-block;
  border: 1px solid grey;
}
blockquote:before,
blockquote:after {
  position: absolute;
  width: 60px;
  height: 60px;
  font-size: 120px;
  line-height: 120px;
  font-family: Lobster;
}
blockquote:before {
  top: 0;
  left: 0;
  content: "\201C";
}
blockquote:after {
  bottom: 0;
  right: .0;
  content: "\201D";
}

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<blockquote>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, repellat.</span>
</blockquote>

<blockquote>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
</blockquote>

<blockquote>
  <span>Lorem ipsum dolor.</span>
</blockquote>

至于居中。根据您的要求，有多种技术。

【讨论】：

【解决方案2】：

我会这样做：

我剥离了所有内联 css：

<div>
<img src="https://4.bp.blogspot.com/-4wmRO867-W4/V7qwJGfVBYI/AAAAAAAAAL0/XQHdOxK34asRSXt3FfBKnOS_wGRcneFEwCEw/s1600/quote_basic.png"/>
<p> "This is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line content" </p>
<img src="https://4.bp.blogspot.com/-kg4kc90TSqs/V7rjthACJLI/AAAAAAAAAMM/sV7buqkUWH8KqYfBVlCGnq14qMdo4eetwCLcB/s1600/quote_basic_mirrored.png"/>
</div>

div {
    border: 1px solid #000;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 50%;
}

p {
    padding: 40px;
}

div img:nth-of-type(1) {
    position: absolute;
    top: 0;
    left: 0;
}

div img:nth-of-type(2) {
    position: absolute;
    bottom: 0;
    right: 0;
}

这是一个结果的小视频：http://screencast.com/t/cSyF3mkvTS

【讨论】：