Блог

Я пытаюсь создать пользовательское усечение текста, представляющего имя файла, которое всегда показывает расширение файла, но скрывает часть имени, если места недостаточно. Например, имя testtesttest.xml файла . Если недостаточно места, я хочу, чтобы оно отображало что-то вроде tes...xml

Я играл text-overflow: ellipsis , но не получил никакого результата. Он либо усекает всю строку, либо не усекает вообще.

 export default function FilenameTruncate(props) {
    const [name, extension] = props.filename.split('.')
    return (
        <div className="filename-container">
            <div className="filename-text">
                <span>{name}</span>
            </div>
            <div className="filename-ext">
                <span>.{extension}</span>
            </div>
        </div>
    )
}
  

 .filename-container {
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.filename-text {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.filename-ext {
    white-space: nowrap;
}

  

Вам нужно добавить overflow свойство и width или max-width :

 .filename-container {
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.filename-text {
    text-overflow: ellipsis;
    max-width: 3em;
    white-space: nowrap; 
    overflow: hidden;
}

.filename-ext {
    white-space: nowrap;
}  

 <div class="filename-container">
    <div class="filename-text">
        <span>longfilename</span>
    </div>
    <div class="filename-ext">
        <span>.ext</span>
    </div>
</div>