我想要完成的是填充其可用父div宽度的标题,但是如果其副本不适合div,则应使用省略号将其截断。此外,它后面还应该有一个图标,该图标在截断后不应消失,而应始终显示在省略号之后。
另一个要求是,父div应该具有一个或多个宽度不特定的按钮,这些按钮应留在最右边,但是如果div的大小被调整,则它应截断长标题,以使图标在省略号旁边显示为:我之前描述过。
在视觉上,我想要的结果如下所示:
到目前为止,我已经实现了以下目标:
/* Helper styles not relevant to the example */
/* Simple flag object from @csswizardry */
.flag {
display: table;
width: 100%;
}
.flag .flag__section {
display: table-cell;
vertical-align: middle;
}
/* Right float text from bootstrap */
.text-right {
text-align: right !important;
}
/* Colors for better visibility */
.container {
background-color: #55606d;
color: #333;
padding: 20px;
}
.flag__section--a {
background-color: #22d398;
}
.flag__section--b {
background-color: #91c1f8;
}
.fluid-text__icon {
background-color: #fecb52;
}
/* Styles relevant to the example */
.container {
max-width: 700px;
}
.fluid-text {
text-align: left;
}
.fluid-text__inner {
max-width: 100%;
}
.fluid-text__inner,
.fluid-text__copy {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fluid-text__copy,
.fluid-text__icon {
float: left;
}
.fluid-text__copy {
padding-right: 5px;
}
.fluid-text__icon {
margin-top: 30px;
}
/* I'd like to not set explicit max width here */
.title {
max-width: 600px;
}
<div class='container'>
<div class='flag'>
<div class='flag__section flag__section--a fluid-text'>
<div class='fluid-text__inner'>
<h1 class='fluid-text__copy title'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque earum in, voluptas dolorum sit ab modi facere tempora est, sequi molestiae! Commodi vitae sapiente ipsum, nisi facilis impedit aut? Repellendus!
</h1>
<span class='fluid-text__icon'>icon</span>
</div>
</div>
<div class='flag__section flag__section--b text-right'>
<button>ACTION</button>
</div>
</div>
</div>
但是,我唯一关心的是,我必须明确设置.title
max-width
不可扩展的类,因此我想避免这种情况。
没有js,有没有办法做到这一点?
Flexbox可以解决此问题,我们只需要将省略号扩展到.description
div并进行一些小的调整即可。
* {
box-sizing: border-box;
}
.parent {
width: 80%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1em;
padding: .5em;
border: 1px solid grey;
}
.description {
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
}
.text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.icon {
flex: 0 0 auto;
background-color: rebeccapurple;
color: white;
padding: .5em;
margin: 0 .25em;
}
.button {
flex: 0 0 auto;
background-color: #ccc;
padding: .5em;
}
<div class="parent">
<div class="description">
<span class="text">Lorem sit amet, consectetur adipisicing elit doloremque earum in, voluptas dolorum sit ab modi facere tempora est, sequi molestiae! Commodi vitae sapiente ipsum, nisi facilis impedit aut? Repellendus!</span>
<span class="icon">I</span>
<span class="icon">I</span>
<span class="icon">I</span>
<span class="icon">I</span>
</div>
<div class="button">
Button
</div>
</div>
<div class="parent">
<div class="description">
<span class="text">Lorem sit amet</span>
<span class="icon">I</span>
<span class="icon">I</span>
</div>
<div class="button">
Button
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句