html - css单行两行文本自适应问题

问题描述

问 题

用一段css实现单行两行文本都和左边元素实现对齐，如图的效果，而且多行时超出部分要隐藏，请问：如何实现？

解决方案

使用 vertical-align: middle 样式可以完成该效果。
我的实现中，暂时无法使用你话的原型中 文本外框固定 的效果，也就是说，右侧文本区域如果想始终固定高度的话，不大好实现（没有深入了解过 flex 布局，不晓得它是怎样的）。
以下是我的实现：

// html
<div class="item">
    <div class="item-sub item-icon">
        <img src="https://static.segmentfault.com/v-59192c02/global/img/touch-icon.png" alt="" />
    </div>
    <p class="item-sub item-info">单行文本</p>
</div>

我使用，其中的 item-icon 和 item-info 原则上讲应该使用 垂直对齐居中 来实现始终在一条水平线上，所以 css 部分为：

// css
.item {
    background: #fff;
    padding: 10px;
    width: 320px;
}
/* item-sub 的定义比较重要 */
.item-sub {
    display: inline-block;
    vertical-align: middle;
}
.item-icon {
    background: #333;
    border-radius: 50%;
    height: 64px;
    overflow: hidden;
    width: 64px;
}
.item-icon img {
    height: 100%;
    width: 100%;
}
.item-info {
    background: #eee;
    line-height: 18px;
    margin: 14px 8px;
    min-height: 18px;
    max-height: 36px;
    overflow: hidden;
    width: 200px;
}

最终效果：

这篇关于html - css单行两行文本自适应问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！