垂直文本实现text-overflow:ellipsis问题求助（需保留inline-flex）

你需要实现两个核心效果：文本垂直排列，内容超出容器时显示省略号，且必须保留display:inline-flex布局（避免inline-block带来的间隙问题）。目前垂直显示正常，但text-overflow:ellipsis未生效，以下是针对性的解决方案：

核心原理 #

text-overflow:ellipsis生效必须同时满足三个条件：

• white-space:nowrap（文本不换行）
• overflow:hidden（溢出内容隐藏）
• 容器有明确的尺寸限制（垂直排版场景下，需限制宽度，对应水平排版的高度限制）

修改后的代码 #

CSS代码 #

.cell{
    display: inline-flex;
    border: 1px solid gray;
    height: 100px;
    align-items: center;
    justify-content: center;
}
.area .rating{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    align-items: flex-start; /* 修正合法取值，原left无效 */
    justify-content: flex-start; /* 修正合法取值，原left无效 */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; /* 新增：溢出内容隐藏，省略号生效必备 */
    width: 20px; /* 新增：固定宽度，限制垂直文本的显示空间 */
}

HTML代码（结构无改动） #

<div class="cell area" id="be-area-info">
   <div class="rowTable">
    <div class="cell rating">Examen alcsf sdf asd</div>
    <div class="cell rating">20</div>
    <div class="cell rating">20</div>
    <div class="cell rating">20</div>
    <div class="cell rating">20</div>
    <div class="cell rating"><i class="fad fa-layer-plus"></i></div>
   </div>
 </div>

关键调整说明 #

• 补充overflow:hidden：这是text-overflow:ellipsis生效的必备条件，没有它溢出内容只会被截断但不会显示省略号。
• 设置固定宽度：垂直排版时，文本的显示空间由容器宽度决定，设置width可以限制文本的垂直延伸长度，触发溢出判断。
• 修正对齐属性取值：align-items和justify-content不支持left作为取值，改为flex-start确保文本靠左对齐，避免居中布局干扰溢出逻辑。
• 保留inline-flex布局：完全符合你的需求，不会出现inline-block元素间的间隙问题。

内容的提问来源于stack exchange，提问作者Aldahir Ruiz Valdez