text-overflow: ellipsis - Displaying text when hovering over

Question

text-overflow: ellipsis - Displaying text when hovering over

Navigation

#1 by (2 votes)

1

I did appear "..." at the end of a very large title, when I hover the mouse 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 you move the mouse over it, remove "..." and display the whole text with a line break in place of the "..." that is, the text drops to a second line.

I am using bootstrap.css bootstrap.mim.css and my shop-homepag.css (below is the code in full).

class p.legenda does the "...", I tried to use p.legenda:hover , but it did not work.

What do I need to do to get this line break?

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 caption classes to be as below, now the ... appear and if you mouse 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;
}

css twitter-bootstrap

asked by anonymous 07.05.2015 / 23:24

1 answer

How to pass objects between controllers in the MVC using OOP How to encrypt and decrypt data to be transmitted via sockets?

score 2 · Accepted Answer

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

Then just change the white-space property that you use with value pre to normal , which is the default value. You can now 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>