首页 > 解决方案 > 文本在增长到最大宽度之前换行

问题描述

我有一个包含一些文本的<div>集合。max-width问题是 div 永远不会增长到它max-width并且文本总是换行。

CSS:

/*Container*/
.tooltip {
    position: absolute;
    left: 0;
    top: 0;
    padding: 15px;
    background-color: #12161AEE;
    display: none;
    z-index: 100;
    cursor: default;
    pointer-events: none;
}

/*Text*/
.tooltip-subtitle {
    color: #EEEEEE;
    max-width: 350px;
    word-wrap: break-word;
    font-style: italic;
    font-size: 13px;
}

结果:

标签: htmlcss

解决方案


我认为您只需要添加text-align: justify;到字幕 CSS 即可。这会将单词分布在元素的宽度上。

.tooltip-subtitle {
    color: #EEEEEE;
    max-width: 350px;
    word-wrap: break-word;
    font-style: italic;
    font-size: 13px;
    text-align: justify;
}

推荐阅读