Overflow:hidden points à la fin

Disons que j'ai une chaîne de caractères "j'aime les gros culs et je ne peut pas mentir" et je l'ai coupé avec overflow:hidden, de sorte qu'il affiche quelque chose comme ceci:

J'aime les gros culs et je cann

couper le texte. Est-il possible d'afficher ce comme ceci:

J'aime les gros culs et je cann...

à l'aide de CSS?

Cette question est une ruse pour promouvoir la chanson?
Désolé pour la réponse tardive. J'ai dû courir à la salle de bain. Pour répondre à ta question... Oui
Double Possible de Comment puis-je afficher les points ("...") dans un span avec caché de débordement?

InformationsquelleAutor mannicken | 2009-01-28

css html

216

Vous pouvez utiliser text-overflow: ellipsis; qui selon caniuse est pris en charge par tous les principaux navigateurs.

Voici une démo sur jsbin.

CSS:
```
.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}
```
HTML:
```
<div class="cut-text">
I like big buts and I can not lie.
</div>
```
- Cela semblait fonctionner dans Firefox 15.0.1: w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
- Oui, il semble fonctionner dans les versions plus récentes. Évidemment, cette réponse est vieux de quelques années à ce point.
- Firefox a commencé à l'appui de ce que de la version 7, qui a été publié dans la seconde moitié de 2011.
- Je peux utiliser mon bon sens de dire que cette réponse est "droit", basé sur les votes et commentaires. Cependant, je ne vois pas en réalité la façon dont cette réponse est "droit". J'ai utilisé les deux overflow: hidden; et text-overflow: ellipsis; dans un <p> élément (c'est à dire, un élément de bloc) et n'a trouvé aucune ... à la fin (bien sûr, je suis en vous assurant qu'il est en effet de débordement). J'ai aussi essayé sans le overflow: hidden; partie, et aussi avec un <span> élément à l'intérieur de la <p> où l' <p> élément avait overflow: hidden; et la <span> avait text-overflow: ellipsis; peu importe comment j'essaie, c'est un échec..
- BTW, j'ai essayé ceci dans Chrome, et alors que je suis arriver que cette règle au moins l'habitude d'avoir des problèmes de compatibilité, je serais certainement espérer qu'il fonctionne dans la version la plus récente de google Chrome, comme de 7/23/2013. Ce que je fais mal? Cela semble trop facile de salir, LOL.
- Eh bien, je pense que je connais le problème. Je suis en train d'essayer de limiter le débordement basé sur max-height donc je ne peut pas avoir white-space: ensemble de nowrap
- est-il à mettre plus de points après comme "salut, c'est s... plus d'" lorsque vous cliquez sur plus pour afficher le texte complet
- Aucune idée. Bonne question. Probablement dignes d'un stackoverflow question
- Quelqu'un sait comment changer juste les 3 points de la couleur sans changer la couleur du texte?
InformationsquelleAutor Joe Phillips
77

Vérifier l'extrait de code suivant pour votre problème

CSS:
```
div{
  width : 100px;
  overflow:hidden;
  display:inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
```
HTML:
```
<div>
    The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P
</div>
```
- up pour l'ajout de "white-space: nowrap;", ce qui pourrait être nécessaire dans certains cas
- avec "white-space: nowrap;" cela ne fonctionne pas.
- comment rendre le texte à l'écran 2 lignes, puis disparaître?
- vous pouvez régler en donnant à hauteur fixe et trop-plein caché styles, consultez ce violon jsfiddle.net/5135L4bx
- oh, je vois. j'ai essayé. cependant, il semble que deux lignes signifie qu'il ne sera pas un ... à la fin?
- c'est leur toute solution si je veux faire remorquer les lignes et dans la deuxième ligne de ces points pour être montré
- display: inline-block; était la composante manquante pour moi. Je vous remercie.
InformationsquelleAutor Arjun
12

Oui, via le text-overflow propriété en CSS 3. Mise en garde: il n'est pas encore prise en charge dans les navigateurs.
- Prise en charge du navigateur est sacrément bon maintenant, Février 2012. Voir caniuse.com/#search=text-overflow
- Ah, vous êtes la raison pour laquelle cette question a montré trois ans plus tard.
InformationsquelleAutor ceejayoz
11

Essayer si vous voulez restreindre les lignes jusqu'à 3 et au bout de trois lignes, les points s'affiche. Si nous voulons augmenter les lignes il suffit de changer l'-webkit-ligne-clamp de la valeur et de donner la largeur de la div de taille.
```
div {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
}
```
- toutes mes excuses, je ne sais pas comment j'ai enlevé vos mots comme ça!
- fonctionne très bien sur Chrome, mais notez que cela ne fonctionne pas sur Firefox
InformationsquelleAutor Nagendra Matala

J'espère que c'est utile pour vous:

CSS:

.text-with-dots {
    display: block;
    max-width: 98%;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

HTML:

<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>

InformationsquelleAutor Vu Phan

<style>
    .dots
    {
        display: inline-block;
        width: 325px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .dot
    {
        display: inline-block;
        width: 185px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
</style>

InformationsquelleAutor Cuteboy_Max

Dans bootstrap 4, vous pouvez ajouter un .text-truncate classe de tronquer le texte avec des points de suspension.

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 190px;">
  I like big butts and I cannot lie
</span>

La question n'est pas pour bootstrap
Pour ceux qui veulent utiliser bootstrap pouvez utiliser cette astuce. Merci pour votre commentaire, de toute façon.

InformationsquelleAutor Penny Liu

La plupart des solutions d'utilisation largeur statique ici. Mais il peut être parfois mal pour certaines raisons.

Exemple: j'avais un tableau avec plusieurs colonnes. La plupart d'entre eux sont étroites (largeur statique). Mais la colonne principale devrait être aussi large que possible (dépend de la taille de l'écran).

HTML:

<table style="width: 100%">
  <tr>
    <td style="width: 60px;">narrow</td>
    <td>
      <span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible">
        dynamic column can have really long text which can be wrapped on two rows
        but we just need not wrapped texts using as much space as possible
      </span>
    </td>
  </tr>
</table>

CSS:

.cutwrap {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 18px;
  white-space: normal;
  color: transparent !important;
}
.cutwrap::selection {
  color: transparent !important;
}
.cutwrap:before {
  content: attr(data-cutwrap);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
/* different styles for links */
a.cutwrap:before {
  text-decoration: underline;
  color: #05c;
}

InformationsquelleAutor Maju

Vous devez vous connecter pour publier un commentaire.