Как поместить многоточие в середину текста, как при вводе собственного файла [закрыто] ⇐ CSS

[Anonymous]

Код: Выделить всё

const { useRef, useState } = React;

function FileInput({ value }) {
const ref = useRef(null);
const [name, setName] = useState({ left: 'choose file' });

function handleChange(e) {
const filename = e.target.value;

if (!filename) {
setName({ left: 'choose file' });
} else {
const split = 0.7;
const splitIndex = Math.round(filename.length * split);
setName({
left: filename.slice(0, splitIndex),
right: filename.slice(splitIndex)
});
}
}

function handleClick() {
ref.current?.click()
}

return (


{name.left}
{name.right}

Upload


);
}

ReactDOM.createRoot(document.getElementById("root")).render();

Код: Выделить всё

input {
display: none;
}

label {
display: flex;
gap: 4px;
}

.filename {
width: 84px;
text-align: left;
display: flex;
overflow: hidden;
background-color: transparent;
border: 1px solid gray;

span:first-of-type {
flex: 0 1 auto;
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
}

span:last-of-type {
flex: 1 0 auto;
overflow: hidden;
white-space: pre;
}
}

Код: Выделить всё

Как это сделать? Я создаю свой собственный ввод файла (первый), используя кнопку и скрытый ввод файла, и хочу воспроизвести поведение переполнения текста из собственного ввода файла (второй).


Я видел подобные идеи. Я попробовал, и это работает, но мне кажется довольно странным разбивать текст таким образом.
[img]https://i.sstatic .net/9xLctbKN.png[/img]

Изменить: добавлен код. Если вы запустите его и попытаетесь загрузить файл, он будет работать нормально для коротких имен файлов, но не для длинных.
Короткое имя файла


Длинное имя файла




Подробнее здесь: https://stackoverflow.com/questions/791 ... file-input