See truncated text on hover is not working

Question

I have an input with text and ellipses when it overflows. I'd like to see the remaining text when I hover. However, it will not show. I looked up different solutions online and all seem to use the method that isn't working. Any help would be appreciated.

.task-text {
    border: none;
    border-radius: 5px;
    background-color: var( --bgTasks-color);
    outline: none;
    color: var(--text-color);
    font-size: 16px;
    width: 280px;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap; 
    text-overflow: ellipsis;
    cursor: pointer;
}

.task-text:hover {
    overflow: visible;
}

<div class="tasks">
<div class="task1">
    <input type="checkbox" id="button1"/>
    <input class="task-text" for="button1">
    </input>
    <button class="material-symbols-outlined star" style="font-size:20px;">star</button>
    <button type="button" class="material-symbols-outlined delete" style="font-size:20px;">delete</button>
</div>

I expected the cutoff text to appear.

I recommend changing the title to mention that the problem is an input. And add some steps to reproduce the issue. I understand that you expect to type in the input a long text and after click start. Then you see the ellipsis. — Raúl Martín, Aug 29 '23 at 16:28
Please correct your HTML (a validator will help you sort out the errors). — A Haworth, Aug 29 '23 at 17:14

Raúl Martín · Answer 1 · 2023-08-29T16:30:18.927

.task-text {
    border: none;
    border-radius: 5px;
    background-color: var(--bgTasks-color);
    outline: none;
    color: var(--text-color);
    font-size: 16px;
    width: 280px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.task-text:hover {
    white-space: normal;
    overflow: visible;
    text-overflow: clip; 
}

         <div class="tasks">
                    <div class="task1">
                        <input 
                            type="checkbox" id="button1"
                        />
                            <input class="task-text" for="button1">
                            </input>
                             <button class="material-symbols-outlined star" style="font-size:20px;">star</button>
                             <button type="button" class="material-symbols-outlined delete" style="font-size:20px;">delete</button>
            
                    </div>

.task-text:hover {
    white-space: normal;
    overflow: visible;
    text-overflow: clip; 
}

You need to remove the overflow hidden to allow it to grow and set white-space to normal as behaved by default.

I only tested on chrome, I recommend you to give more test. Inputs can be tricky.

Note: I found this very old question on StackOverflow asking a similar thing, the scene change a lot from that moment in time but just in case is helpful: How to use text-overflow ellipsis in an html input field?

See truncated text on hover is not working

1 Answers1