Возможно создавать max lenght для span, div или p

Привет, что такое это - мое сомнение: что существует признак для input и text-area которым манипулируют количество символов как maxlenght, мой вопрос, - если это может делаться с span, div или любая другая этикетка. Моя идея состоит в том, чтобы иметь что-то подобное:

<span maxlength="9">David Perez</span>

Но что на экране он ТОЛЬКО появился:

David Per

Если решение - из-за JQuery, язык сценариев JavaScript или CSS не имеет значение я благодарен за любую помощь.

1
задан 19.01.2017, 02:57
0 ответов

Простой способ состоит в том, чтобы отрезать цепь символов, я это делаю с javascript. Например:

var substr;
var str = "cadena";

substr = str.substring(0, 3);
console.log(substr);

это как результат напечатает тебя на экране cad что одинокий звук 3 символа, которые мы считаем распределенными, чтобы отрезать цепь символов и в конце концов чтобы печатать информацию в span только нужно давать ему один пойдите. Например:

html

<span id="nombre"> </span>

javascript

document.getElementById("nombre").innerHTML = substr;

весь пример:

<!DOCTYPE html>
<html>
<body>

<span id="nombre"> </span>

<button onclick="myFunction()">Imprimir cadena</button>

<script>
function myFunction() {
    var substr;
    var str = "cadena";

    substr = str.substring(0, 3);

    document.getElementById("nombre").innerHTML = substr;

}
</script>

</body>
</html>
1
ответ дан 03.12.2019, 17:37

Признак maxlength он одинокий для этикеток input и textarea. Ты можешь состязаться то же самое с языком сценариев JavaScript в любом компоненте.

let btn = document.getElementById('cut');
btn.addEventListener('click', () => {
  let lines = document.querySelectorAll('.line');
  [].forEach.call(lines, line => applyMaxLen(line, 10));
});

function applyMaxLen (el, maxChars = 5) {
  el.textContent = el.textContent.substring(0, maxChars);
}
.line {
  border-bottom: 1px solid #eee;
  color: #333;
  display: block;
  height: 35px;
  line-height: 35px;
  padding: 0 .25rem;
}
#cut {
  margin-top: 20px;
}
<span class="line">Hola, ¿cómo estás?</span>
<span class="line">Bien, gracias, ¿y tú?</span>
<button id="cut">Cortar</button>
0
ответ дан 03.12.2019, 17:37