Как сделать так, чтобы в обычном состоянии текст был обрезан, а при наведении он был во всю ширину??

Question

[SaberChazer]

Здравствуйте, подскажите как сделать или где найти.

Вопрос: как сделать так, чтобы в обычном состоянии текст был обрезан, а при наведении он был во всю ширину.
То есть пользователь сначала видит "windows 10 ..." наводит на текст и проявляется "Windows 10 (Enterprice, Pro, Home)"

Обыскал пол интернета, подходящего не нашел.

<ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Windows 10 <b id="b">(Enterprice, Pro, Home)</b></a></li>
        <li><a href="#">Windows 11 <b id="b">(Home, Pro, Enterprice)</b></a></li>
      </ul>

и на текст в теге b не обращайте внимание

Answer 1

[Keith Griffon]

Hover используйте div:hover{
}

Comments

[SaberChazer]

Конечно верно, но немного не то.

[Keith Griffon]

SaberChazer, вам нужно чтобы при наведении менялся текст?

[SaberChazer]

Keith Griffon, Верно, как я указал ниже чтобы с укорочённого текста он при наведении менялся на весь текст.

[Keith Griffon]

Ознакомьтесь пожалуйста

<a href="/faq" title="FAQ" class="article-container">
    <div class="article">
        <img src="/images/logo.png" alt="текст">
        <span class="text">FAQ</span>
        <span class="text-hover">text text</span>
    </div>
</a>

.article-container {
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    color: #fff;
}

.article {
    color: #000;
}
.text{
    
}
.text-hover {     
    visibility: hidden;       
}
.article-container:hover .text{
    display: none;
}
.article-container:hover .text-hover {    
    visibility: visible;    
}

[SaberChazer]

Keith Griffon, Благодарю

[Keith Griffon]

SaberChazer, всегда пожалуйста;) обращайтесь