text-overflow: Ellipsis - Displaying text when mouse over

Question

I made appear "..." at the end of a very large title, when I hover over it I can already make it display the rest of the title, but it does not use a line break.

How do I want it to work? When passing the mouse on top it removes "..." and displays the whole text with a line break in the place where the "..." is, the text drops to a second line.

I’m using bootstrap.css bootstrap.mim.css and my shop-homepag.css (below is the code in the integrates).

the class p.legenda does the "...", I tried to make it p.legenda:hover, but it didn’t work.

What do I have to do to get this line broken?

shop-homepag.css:

/*!
 * Start Bootstrap - Shop Homepage HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

.slide-image {
    width: 100%;
}

.carousel-holder {
    margin-bottom: 30px;
}

.carousel-control,
.item {
    border-radius: 4px;
}

.caption {
    height: 130px;
    overflow: hidden;
}

.caption h4 {
    /*white-space: nowrap;*/
    white-space:pre;
    overflow:hidden;
    text-overflow: ellipsis;
    width: 200px;
}

.thumbnail img {
    width: 100%;
}

.ratings {
    padding-right: 10px;
    padding-left: 10px;
    color: #d17581;
}

.thumbnail {
    padding: 0;
    border: none;
    margin-bottom:5px;
}

.thumbnail .caption-full {
    padding: 9px;
    color: #333;
}

footer {
    margin: 50px 0;
}
p{
    margin-left:0;
    margin-bottom:0;
}
p.legenda{
    white-space:pre;
    overflow:hidden;
    text-overflow: ellipsis;
    width: 200px;
}

p.legenda:hover{
    text-overflow: inherit;
    overflow: visible;
    width: 200px;
}



p.tempo{
    font-size:12px;
}

What needs to be changed for him to break the line.

SOLUTION:

I changed the subtitle classes to look like below, now the ... appear and if you hover over the rest of the title appears with the line break

.legenda p{
    white-space:pre;
    overflow:hidden;
    text-overflow: ellipsis;
}

.legenda p:hover{
    white-space:normal;
    text-overflow: inherit;
    overflow: visible;
}

.legenda{
     width: 200px;
}

Answer 1

If the title is larger than the div where it is, automatically the line will be broken and the rest of the text will go to the bottom line. So what you need, basically is to have a size set in the father div where that title is.

Then just change the property white-space that you use with value pre for normal, which is the value default. With this you can already get the result you are looking for:

.wrap {
  background: skyblue;
  height: 200px;
  width: 200px;
}

.wrap header {
  overflow: hidden;
  white-space: pre;
  width: 100%;
  text-overflow: ellipsis;
}

.wrap header:hover {
  white-space: normal;
}

<div class='wrap'>
  <header>Meu título enooooooooooooooooorme</header>
</div>