Question

我的HTML / CSS文件中有一个黑色矩形标题，必须具有以下行为：

只要文本内部的文字需要比最小高度更大的空间，就必须展开，85像素
里面的文字必须在黑色矩形标题
所有文字必须可见

我很难让它同时完成所有3个。每当它里面的文字变得非常大时，它就会破碎（参见下面的Plunker链接）。这是我的HTML和CSS：

.mikeproject-base-component-header .component-header .component-title .title-text span {
      font-size: 145%;
      text-transform: uppercase;
      display: inline-block;
      vertical-align: middle;
      line-height: 120%;
      font-weight: 100;
    }
    
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    
    .mikeproject-base-component-header .component-header .component-title .title-text {
      display: table;
      line-height: 40px;
      top: 50%;
      margin-top: -20px;
      position: absolute;
      padding-left: 20px;
    }
    
    .mikeproject-base-component-header .component-header .component-title {
      min-height:85px;
      padding: 0;
      font-family: "Open Sans";
      position: relative;
    }
    
    .portal-theme-graphite .component-header .component-title, .portal-theme-mission .component-header .component-title {
      background-color: #333333;
      border-color: none;
      color: #ffffff;
    }
    
    .mikeproject-base-component-header .component-header {
      background: white;
      font-family: "Open Sans";
    }

<!DOCTYPE html>
    <html>
    
      <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
      </head>
    
      <body>
        <div class="mikeproject-portal"><div class="par base-component base-component-header outer parbase s8 progress-container">
    <div class="inner">
    <div class="mikeproject-base-component-header portal-theme-graphite ">
      <div class="component-header">
        <div class="component-title">
          
          <div class="title-text"><span>This is a really long title This is a really long title This is a really long title This is a really long title This is a really long title This is a really long title This is a really long title</span></div>
        </div>
        
      </div>
      </div>
    </div>
    
    </div>
    </div>
    </body>
    
    </html>

最后，这是这个问题的plunker链接：

http://plnkr.co/edit/MuynO7oSjzXcDcKOwoEo?p=preview

如何让它拥有上述所有3种行为？

Answer 1

为什么不简单地在容器上使用填充物？

div {
  width: 200px;
  min-height: 85px;
  background: tomato;
  padding: 20px;
}

<div>
  <span>This is a really long title This is a really long title This is a really long title This is a really long title This is a really long title This is a really long title This is a really long title This is a really long title This is a really long title This is a really long title This is a really long title This is a really long title</span>
</div>
<hr>
<div>
  <span>This is text</span>
</div>

Answer 2

您可以通过调整.title-text：

的CSS规则来解决问题

.mikeproject-base-component-header .component-header .component-title .title-text {
  line-height: 40px;
  padding: 20px;
}

您可以简单地使用具有静态定位的普通块级元素。使用20px获取块边缘和文本之间的间距。请注意，您不需要绝对定位或display: table。

.mikeproject-base-component-header .component-header .component-title .title-text span {
  font-size: 145%;
  text-transform: uppercase;
  display: inline-block;
  vertical-align: middle;
  line-height: 120%;
  font-weight: 100;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.mikeproject-base-component-header .component-header .component-title .title-text {
  line-height: 40px;
  padding: 20px;
}
.mikeproject-base-component-header .component-header .component-title {
  min-height: 85px;
  padding: 0;
  font-family: "Open Sans";
  position: relative;
}
.portal-theme-graphite .component-header .component-title,
.portal-theme-mission .component-header .component-title {
  background-color: #333333;
  border-color: none;
  color: #ffffff;
}
.mikeproject-base-component-header .component-header {
  background: white;
  font-family: "Open Sans";
}

<div class="mikeproject-portal">
  <div class="par base-component base-component-header outer parbase s8 progress-container">
    <div class="inner">
      <div class="mikeproject-base-component-header portal-theme-graphite ">
        <div class="component-header">
          <div class="component-title">
            <div class="title-text"><span>This is a really long title This is a really long title This is a really long title This is a really long title This is a really long title This is a really long title This is a really long title</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

你需要使用css类white-space：nowrap;在你的跨度，以防止“破坏”。这样它就会在一条连续线上输出。

此外，将20px填充附加到跨度以获得所需的填充/边距以及背景颜色，以便跨度处理所有内容。现在，随着文本的增长，您的块也会增长。

.title-text{
color:#fff; 
background:#000; 
white-space:nowrap; 
padding:20px;
}

示例：http://plnkr.co/edit/JJfHZ9fTs0WsjZYliNXl?p=preview

干杯！

Answer 4

尝试：

height: auto !important; 
overflow: auto !important;

如何保留边距并扩展div以适应其内容大小？

4 个答案: