我正在尝试使一些 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
容器的宽度?我所说的“适应”是指保持当前字体大小并剪切(省略号)不适合内部的文本。
问候
编辑:
抱歉造成误会。我无法为 box
类设置宽度,因为我不知道它的宽度。我需要它的宽度与元素(content
框)一样多。
最佳答案
这可以通过对 CSS 进行一些更改来实现。
- 制作
.title
position: relative;
这将使h3
位置相对于它 - 制作
h3
position: absolute;
将其从文档流中取出并赋予它width: 100%
- 将
white-space: nowrap;
添加到h3
停止内容换行到新行 - 从
.content
中删除width: 170px;
以使其占用尽可能多的空间
.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>
关于html - 使文本适应容器的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26515122/