Quiero poner un máximo de caracteres a un titulo, y cuando ya llegue a ese máximo muestre los 3 puntos que indican que el texto sigue, este es mi codigo:
.title {
font: bold 22px Roboto, sans-serif;
float: left;
margin: 0 0 8px 2px;
Quiero poner un máximo de caracteres a un titulo, y cuando ya llegue a ese máximo muestre los 3 puntos que indican que el texto sigue, este es mi codigo:
.title {
font: bold 22px Roboto, sans-serif;
float: left;
margin: 0 0 8px 2px;
Usa propiedades de CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.short { width: 50px; }
</style>
</head>
<body>
<div class="short">
<p class="ellipsis">Esto es una cadena muy larga</p>
</div>
</body>
</html>
Usando JavaScript, con .replace()
[...document.getElementsByClassName("title")].forEach(function(e){
e.innerHTML = e.innerHTML.replace(/(.{1,5})(.*)/g, "$1...");
})
<h1 class="title">Titulo muyyy largo</h1>