actualmente tengo el requisito de que necesito mostrar un bloque de artículos como máximo en una línea, y la parte sobrante debe reemplazarse con puntos suspensivos... El
El método generalmente recomendado en Internet es el siguiente:
white-space: nowrap; overflow: hidden ; text-overflow: ellipsis; Pero debido a mi diseño, no sé por qué usar espacios en blanco: nowrap; causará confusión en el diseño, por lo que busco que cumpla con este requisito, pero no uso white-space: nowrap ; ¡Estas propiedades, otros métodos CSS!
Si tiene otros métodos de JavaScript que se pueden hacer, también puede proporcionar sus valiosos comentarios, gracias.
.text-line{ height: 100px; background-color: #AAA8A8; display: inline-block; width: 300px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } <div class="text-line"></div>Puedes hacerlo con CSS, pero está lejos de ser el más limpio:
div { position: relative; display: block; overflow: hidden; width: 300px; --height: 1.2em; line-height: var(--height); height: var(--height); } div:after { bottom: 0; right: 0; position: absolute; content: "..." } <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> Cualquier cosa más precisa requerirá JavaScript, comotext-overflow: ellipsis; requiere white-space: nowrap , por desgracia.