Question

我有以下代码：

HTML：

<div class="outer">
  <div class="inner">
    some very very very very very very long text  
  </div>
</div>

的CSS：

outer{
  position:absolute;
  width:100%;
  height:40%;
  background: rgba(0,0,0,.5);
}
.inner{
  position:absolute;
  bottom:10%;
  left:50%;
  max-width:100%;
  transform: translate(-50%, 0%);
  background: rgba(0,0,0,.5);
}

只要外部div中有足够的空间，我希望文本保持在一行上。但如果空间不够，则应显示在2行上。

我还需要：

要居中的文字，
能够垂直定位文本（底部：10％;）
内部div的背景是在文本周围，而不是在整行

在上面的代码中，文本开始显示在2行时有可用空间。

我尝试了white-space nowrap，但它从未进行过2行......

这是jsfiddle：https://jsfiddle.net/yqvtgdhp/2/

当外部div变得太窄时会出现问题：例如，通过调整浏览器窗口的大小来尝试减小其宽度。

Answer 1

要使文字填充外部div，我将max-width属性更改为width。然后，为了使文本水平居中，我添加了text-align: center;属性。

要使背景仅覆盖文本，请在文本周围添加范围，并在该标记上设置background属性。请参阅this question。

＆＃13;

.outer{
  position:absolute;
  width:100%;
  height:40%;
  background: rgba(0,0,0,.5);
}

.inner{
  position:absolute;
  bottom:10%;
  left:50%;
  width:100%;
  transform: translate(-50%, 0%);
  text-align:center;
}

.wrapper {
  background: #FFFFFF;
}

＆＃13;

 <div class="outer">
  <div class="inner">
  <span class="wrapper">
    some very very very very very very long text   very very very very very very very very very very very very very very very very very very very very very very very ver</span>
  </div> 
</div>

＆＃13;

请告诉我这是否适合您。

Answer 2

有关详细信息，请参阅此处：
https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

这是一个更新的JSFiddle：https://jsfiddle.net/yqvtgdhp/3/

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

Answer 3

您可以尝试制作父div＆＃39;外部＆＃39;相对的位置，让孩子成为内心的“内心”。绝对的位置。这将允许孩子在父母中居中并使用其所有空间。试试这个css：

write(List<? extends T> items)

在文本进入第二行之前，使包含文本的div填充到父宽度

3 个答案: