Question

我尝试将一些a元素调整为它们所在容器的总宽度。

这是我目前的代码：http://codepen.io/anon/pen/FsgvI

HTML

<div class="box">
  <div class="title">
    <div class="something">
      <h3>
        <a href="#">This is foo</a>
        >
        <a href="#">and then bar</a>
        >
        <a href="#">and then test</a>
      </h3>
    </div>
  </div>
  <div class="content">
    asdijfg asoidf oasidf aosidf
  </div>
</div>

CSS

.box {
  border: 1px solid red;
  display: inline-block;
}

.content {
  border: 1px solid blue;
  width: 170px;
  height: 100px;
}

.title {
  height: 30px;
}

h3, h3 > a {
  text-overflow: ellipsis;
  overflow: hidden;
}

如何使文本适应box容器的宽度？通过＆＃34;适应＆＃34;我的意思是保持当前的字体大小并剪切（省略号）不适合的文本。

此致

编辑：

对不起，我很抱歉。我无法为box课程设置宽度，因为我不知道它的宽度。我需要它与许多项目（content框）一样宽。

Answer 1

只需对CSS进行一些更改即可。

点击.title position: relative;这将使h3相对于它的位置
让h3 position: absolute;将其从文档流中取出并为其提供width: 100%
将white-space: nowrap;添加到h3，停止内容换行到新行
从width: 170px;移除.content以允许其占用所需空间

.box {
  border: 1px solid red;
  display: inline-block;
}

.content {
  border: 1px solid blue;
  height: 100px;
}

.title {
  position: relative;
  height: 50px;
  width: 100%;
}

h3 {
  position: absolute;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

<div class="box">
  <div class="title">
    <div class="something">
      <h3>
        <a href="#">This is foo</a>
        >
        <a href="#">and then bar</a>
        >
        <a href="#">and then test</a>
      </h3>
    </div>
  </div>
  <div class="content">
    asdijfg asoidf oasidf aosidf
  </div>
</div>

Codepen： http://codepen.io/anon/pen/GgkJr

Answer 2

我必须为包含元素添加一个宽度，并将white-space: nowrap;添加到.something div。

.box {
  border: 1px solid red;
  display: inline-block;
  width:170px;
}

.content {
  border: 1px solid blue;
  width: 170px;
  height: 100px;
}

.title {
  height: 30px;
}
.something{
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

使文本适应容器的宽度

2 个答案: