Texte tronqué dans les flottait boîte et de l'afficher entièrement lors du survol

J'ai code html suivant:

<div class="box">
  <div class="box-left">
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</p>
  </div>
  <div class="box-right">
    <button>Resource View</button>
    <button>Employee View</button>
    <button>Regular View</button>
  </div> 
</div>

Voici à quoi il ressemble par défaut:

À quoi il ressemble lors du survol du texte (nous voir texte intégral de la longueur):

Texte tronqué dans les flottait boîte et de l'afficher entièrement lors du survol

Plus d'informations:

Je suis en utilisant le texte-bouton de sélection de texte tronqué (voir ici)
Lorsque le texte est planait, nous utilisons :hover sélecteur pour régler position:absolute au texte de l'alinéa
Nous ne savons pas à l'avance la largeur de .box-right, ni la largeur de .box-left
.box largeur est égale largeur de la fenêtre (donc c'est variable)

En fait, j'ai cet exemple de travail avec CSS et Javascript le javascript est constitué de .box-left p'élément de la largeur de chargement de la page, à l'aide de:

$('.box-left p').css('width', $('.box').innerWidth() - $('.box-right').outerWidth())

Question:

Je me demandais si il y a un CSS seule solution? J'ai essayé avec display: table-cell sans succès.

Ce que je veux faire:

Texte tronqué de .box-left d'avoir les boutons et le texte sur une seule ligne
Lorsque le curseur de texte, de montrer que c'est la pleine longueur

"Nous ne savons pas à l'avance la largeur..." - pourquoi pas? Ne peut-on pas utiliser des pourcentages?
Sur le vol stationnaire voulez vous cacher toute la zone de contenu à droite ou seulement la partie gauche du texte couvre

OriginalL'auteur julesbou | 2013-10-15

9

Comment à ce sujet:

Avis que j'ai pas mis une largeur sur la boîte. Il fonctionne, peu importe ce que la largeur de la boîte est.

VIOLON

Balisage:
```
<div class="box">
   <div class="box-right">
        <button>Resource View</button>
        <button>Employee View</button>
        <button>Regular View</button>
  </div>
  <div class="box-left">
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</p>
  </div> 
</div>
```
CSS
```
.box
{
  border:1px solid green; 
  white-space: nowrap;
}
.box-left p
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block; 
    min-height: 30px;
}
.box-left p:hover
{
    background: #fff;
    position: relative;
    z-index: 1;
    display: inline-block;
}
.box-right
{
    float: right; 
    display: inline-block; 
}
.box-right button
{
    display: inline-block; 
}
```
Je pense que vous devriez ajouter width:100% à .box-left p:hover et alors nous sommes d'or (comme il couvrira tous les boutons à n'importe quelle largeur) 🙂
Je ne sais pas ce que la coopérative doit à ce sujet. (Regardez la question que j'avais posée dans les commentaires sur la question)
Je sais ce que tu veux dire, mais ça ressemble un peu à un pantalon si la moitié le bouton est coupé.. peut-être une belle box-shadow sur le côté droit au moins à la plume les bords? 😛
c'est aussi une honte que nous avons à modifier le flux HTML, sinon, on pourrait le style de la box-right lors du survol d' box-left. Putain CSS ne permettant pas de sélectionner précédente frères et sœurs

OriginalL'auteur Danield

DÉMO: http://jsfiddle.net/dp6Xs/

CSS

.box {
    width: 600px;
    height: 2em;
    position: relative;
    background-color: #ddd;
}

.box > div {
    position: absolute;
    height: 100%;
}

.box-left {
    left: 0;
    width: 250px;
}

.box-left > p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box-right {
    right: 0;
    width: 350px;
}

.box-left:hover {
    width: 100%;
}

.box-left:hover + .box-right {
    display: none;
}

L'idée est que lorsque nous avons passez la souris sur .box-left nous l'augmentation de la largeur à 100% de la société mère et de nous le cacher frère de l' .box-right.

La partie la plus délicate est .box largeur est variable. Il peut être 600px ou de toute autre valeur.

OriginalL'auteur gvee

Vous devez vous connecter pour publier un commentaire.

Balisage:

CSS

CSS