Inline-block span à l'intérieur d'une partie html td) texte-points de suspension échoue sur les mots longs

Mon objectif est de disposer d'une cellule à l'intérieur d'un tableau HTML avec un bouton d'expansion.

C'est le html, j'ai utilisé:

<td>
  <span class='outer'>
    <button>+</button>
    <span class='inner'>Sed eu nisi sit amet</span>
  </span>
</td>

L'extérieur de l'échelle est centré : il contient un bouton et le texte.

La position du bouton est fait grâce à un positionnement absolu sur la gauche de l'extérieur, certains à gauche-rembourrage éviter que le texte passe sous le bouton.

Tout est bien sauf quand j'ai un mot qui ne convient pas à l'intérieur de la td. J'ai pensé à un overflow:hidden + text-overflow:ellipsis suffirait, mais j'ai un problème.

Une démo est disponible à http://jsfiddle.net/omanovitsh/HYDss/54/

OriginalL'auteur olivieradam666 | 2011-09-29

  1. 8

    Essayez quelque chose comme:

    .table2 .inner {
    text-overflow: ellipsis;
    max-width: 2em;
    white-space: nowrap;
}

    Le max-width (ou tout simplement utiliser la largeur si vous préférez) et les forces de l'débordement à coup de pied dans.

    En fait je n'ai pas de max-width. Si la table est redimensionnée et devient plus grand je veux voir mon contenu
    Ah, je vois. Ce serait un bon moment pour utiliser calc alors :p
    J'ai fini par mettre une dynamique max-largeur avec un peu de javascript
    Avez-vous essayé de @media ... dans votre css pour définir diverses max-largeurs pour les différentes tailles d'écran?

    OriginalL'auteur ajsharma

  2. 5

    Tout d'abord, en général, vous voulez éviter de mettre des éléments de niveau bloc dans les éléments en ligne et c'est un de ces cas. Voir ici:

    http://www.w3.org/TR/REC-html40/struct/global.html#block-inline

    Note que: "en Général, les éléments de niveau bloc peut contenir des éléments en ligne et d'autres éléments de niveau bloc. Généralement, les éléments en ligne peuvent contenir que des données et d'autres éléments en ligne. Inhérente à cette distinction structurelle est l'idée que les éléments de bloc de créer des "grosses" structures que des éléments inline."

    En ce qui concerne le CSS, vous diriez:

    .table2 p
{
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    width: 100%;
}

    En ce qui concerne le HTML, vous devez modifier le spans à divs:

    <td>
    <div class='outer'>
        <button>+</button>
        <div class='inner'><p>Sed eu nisi sit ametametamet</p></div>
    </div>
</td>

    Sinon, réglage de la largeur à 100% pour le p élément sera pas en mesure d'ajuster la largeur de son parent de l'élément depuis l'élément parent est un span qui est un élément inline.

    Merci.

    Veuillez voir ici: http://jsfiddle.net/VivekVish/HYDss/76/

    Je vous remercie, mais j'ai besoin d'obtenir le text-overflow: ellipsis de travail, ou si pas possible de briser le long terme.
    J'ai modifié ma réponse. Merci de me dire si cela répond à votre question. Je vous remercie.
    Le problème est que je ne peut pas imposer la largeur de cette façon. J'ai besoin le contenu de la cellule pour prendre toute la largeur disponible(si le tableau est redimensionnée)
    A donné le meilleur de moi-shot Olivier. Veuillez voir les modifications et dites-moi si ça aide. Merci.
    Merci beaucoup vous avez sauvé ma journée 🙂 j'ai supprimé le paragraphe que vous avez ajouté ce qui n'était pas nécessaire de résoudre mon problème (voir la section jsfiddle.net/HYDss/87), il serait bien si vous avez mis à jour votre réponse en conséquence. Bye et merci

    OriginalL'auteur Deets McGeets