mehrzeilige Textüberlauf (dotdotdot): wickeln nur Wort

Question

Ich habe so Beispiel meines Code:

<div class="container"> 
    <div class="item n1">Proe Schugaienz</div> 
    <div class="item n2">Proe Schugaienz</div> 
    </div> 

und i verwenden, wie jQuery-Code:

$('.item').dotdotdot({ 
    wrap: 'word', 
    fallbackToLetter: false 
}) 

und CSS:

.item { 
    margin: 5px; 
    background: red; 
    padding: 2px; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
} 

.n1 { 
    width: 8px; 
} 

.n2 { 
    width: 80px; 
} 

aber als Ergebnis bekomme ich:

als Ergebnis möchte ich dies erreichen:

ist es möglich, mit reinem CSS oder mit dotdotdot.js? Wenn Wort (Satz) nicht mit seinem Elternteil übereinstimmen kann: dann nur Standard-Einzeiliger-Text-Überlauf anzeigen Wenn Wort (Satz) in der Lage ist Wortwort für Wort zu passen - dann passt es, keine Buchstaben-Silbentrennung!

also nicht ich meinen Container will von Höhe zu extented (i viele Daten haben, es ist nur ein Beispiel, konnte ich nicht einige Blöcke codieren)

https://plnkr.co/edit/IxS0CReJicRfDdeGpoPo?p=preview

Answer 1

Sie flex verwenden können

<div class="container"> 
<span></span> 
<em></em> 
</div> 
.container { 
    display: flex; 
    justify-content: center; /* centers content horizontally*/ 
    align-items: center /* centers content vertically*/ 
} 

Answer 2

Hier ist ein Vorschlag, der die Wortbruch verhindert - auch gibt es Änderungen in der Auszeichnungs:

1. Ich verwende flexbox Container item für die div inner die dotdotdot angewendet hat - dies stellt sicher, zwei Dinge:

   a. inner nimmt die Breite des Inhalts

   b. word-wrap: break-word von dotdotdot angewandt wird das Wort nicht brechen

2. Jetzt ist es möglich, zu erkennen, wenn Wort oder Überlauf brechen passieren kann - das wäre, wenn inner Breite item Breite überschreitet.

   So können wir dies in der Rückruf erkennen von dotdotdot! Wenn Wörter anfangen zu brechen, müssen Sie Ellipse - so ersetzen Sie den Text mit ... wie dotdotdot tut.

Siehe Demo unter:

$('.inner').dotdotdot({ 
 
    wrap: 'word', 
 
    watch: 'window', 
 
    fallbackToLetter: false, 
 
    callback: function(isTruncated) { 
 
    // this detects 'break-word' 
 
    if($(this).outerWidth() > $(this).closest('.item').outerWidth()) { 
 
     $(this).text('...'); 
 
    } 
 
    } 
 
});

.item { 
 
    margin: 5px; 
 
    background: red; 
 
    padding: 2px; 
 
    display:flex; 
 
    height: 100px; 
 
} 
 
.n1 { 
 
    width: 12px; 
 
} 
 
.n2 { 
 
    width: 80px; 
 
} 
 
.n3 { 
 
    width: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.7.4/jquery.dotdotdot.js"></script> 
 
<div class="container"> 
 
    <div class="item n1"> 
 
    <div class="inner">Proe Schugaienz.</div> 
 
    </div> 
 
    <div class="item n2"> 
 
    <div class="inner"> 
 
     Proe Schugaienz. More text here. More text here. More text here. 
 
    </div> 
 
    </div> 
 
    <div class="item n3"> 
 
    <div class="inner"> 
 
     Proe Schugaienz. More text here. More text here. More text here. 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Sie Anzeige einstellen sollten: inline-block; und Zeilenhöhe: 26px; (oder irgendeinen geeigneten Wert, den Sie für geeignet halten) zur Klasse .n1 und erhöhen Sie auch die Breite auf 16px (d. h. genug Breite, um zwei Buchstaben unterzubringen). So sollen die endgültigen CSS wie folgt:

.item { 
    margin: 5px; 
    background: red; 
    padding: 2px; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
} 
.n1 { 
    line-height: 26px; 
    width: 16px; 
} 
.n2 { 
    width: 80px; 
} 

Auch die Linien in script.js entfernen, die u das gleiche Ergebnis zu erzielen verwendet hat. Es sollte für Sie arbeiten.

Answer 4

Ich denke, einfachste Lösung dafür ist CSS "Text-Überlauf: Elipsis". Sie können unter css-Ausschnitt für das gewünschte Ergebnis verwenden.

.item.n1 {width: 20px; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis;} 

Beachten Sie, dass; Breite ist dein Wendepunkt für Punkte.

Answer 5

Zum Element, das Sie mit einem zeigen wollen ... Beantragen Sie den folgenden Code

.example-element{ 
max-width: example-width; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
} 

Sie die Breite am Maximum einstellen können Sie wollen.

Answer 6

Da Sie bereits JS verwenden, würde ich dies ohne Bibliothek/Plugin tun.

const items = document.querySelectorAll('.item') 
 
const log = document.querySelector('#log') 
 

 
const MIN_WIDTH = 32 
 

 
// Check if the elements are smaller than the MIN_WIDTH 
 
// and apply a class to hide the text and show an ellipsis. 
 
for (let item of items) { 
 
    if (item.clientWidth < MIN_WIDTH) { 
 
    item.classList.add('hidden') 
 
    } 
 
}

.item { 
 
    background-color: red; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    margin-bottom: 0.5rem; 
 
    padding: 0.2rem; 
 
} 
 
.n1 { 
 
    width: 1.5rem; // 24px 
 
} 
 
.n2 { 
 
    width: 6rem; 
 
} 
 

 
/* 
 
    This will hide the text and display an ellipsis instead 
 
*/ 
 
.hidden { 
 
    position: relative; 
 
    white-space: nowrap; 
 
} 
 
.hidden::before { 
 
    content: '...'; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: red; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div class="item n1">Proe Schugaienz</div> 
 
    <div class="item n2">Proe Schugaienz</div> 
 
</div>

Wenn Sie die Größe der Elemente auf ändern, können Sie die Schleife in einer Funktion wickeln, und dann rufen, wenn nötig.

Answer 7

 $.fn.overflow = function() { 
 
      return this.each(function() { 
 
       if ($(this)[0].scrollWidth > $(this).innerWidth()) { 
 
        $(this).css('overflow', 'hidden').css('text-overflow', 'ellipsis').css('white-space', 'nowrap').css('min-width', '16px'); 
 
       } 
 
      }); 
 
     }; 
 
     $(function() { 
 
      $('.item').overflow(); 
 
     });

 .item { 
 
      margin: 5px; 
 
      background: red; 
 
      padding: 2px; 
 
      overflow: auto; 
 
      word-wrap: break-word; 
 
     } 
 

 
     .n1 { 
 
      width: 8px; 
 
     } 
 

 
     .n2 { 
 
      width: 80px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
     <div class="item n1">Proe Schugaienz</div> 
 
     <div class="item n2">Proe Schugaienz</div> 
 
    </div>

Answer 8

stimme ich den gegebenen Antworten vor Text-Überlauf und fügte hinzu: Auslassungszeichen; zu den divs funktioniert auch, wenn der Inhalt nicht überläuft. Ich glaube, dass Sie die Ellipse am Anfang des Inhalts, die durch "umgekehrte Ellipse" erreicht werden können, und ohne die Hilfe von Js-Code können Sie diese Art der Ausgabe zu erreichen. Hier ist eine PLNKR, die ich für Sie erstellt habe:

https://plnkr.co/edit/TwotVdtGMaTi6SWaQcbO?p=preview

 .box { 
    width: 250px; 
    border: 1px solid silver; 
    padding: 1em; 
    margin: 1em 0; 
    } 

    .ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    } 

    .reverse-ellipsis { 
    /* Your move. */ 
    text-overflow: clip; 
    position: relative; 
    background-color: #FFF; 
    } 

    .reverse-ellipsis:before { 
    content: '\02026'; 
    position: absolute; 
    z-index: 1; 
    left: -1em; 
    background-color: inherit; 
    padding-left: 1em; 
    margin-left: 0.5em; 
    } 

    .reverse-ellipsis span { 
    min-width: 100%; 
    position: relative; 
    display: inline-block; 
    float: right; 
    overflow: visible; 
    background-color: inherit; 
    text-indent: 0.5em; 
    } 

    .reverse-ellipsis span:before { 
    content: ''; 
    position: absolute; 
    display: inline-block; 
    width: 1em; 
    height: 1em; 
    background-color: inherit; 
    z-index: 200; 
    left: -.5em; 
    } 

    body { 
    margin: 1em; 
    } 

HTML 

     <!DOCTYPE html> 
    <html> 

    <head> 

    <link rel="stylesheet" href="style.css" /> 

    </head> 

    <body> 

    <p>The goal would be to add ellipsis on the beginning and show the end of the content. Any idea?</p> 
    <div class="box ellipsis reverse-ellipsis"><span>Here is some long content that doesn't fit.</span></div> 
    <div class="box ellipsis reverse-ellipsis"><span>Here is some that does fit.</span></div> 
    </body> 

    </html> 

Alles, was Sie tun müssen, ist ein zusätzliches Element innerhalb .reverse-Auslassungs hinzufügen (hier eine Spanne); Ich hoffe, das könnte dir helfen.