文字编辑框，如何限制行数，和每行的字数？

Posted 2023-04-04

就是一个文本编辑框，要求限制可输入的行数和每行的字数。

只能限制文本框是单行或者多行，不能说限制为固定行数，而且 字数只能限制总长度不能限制每行输入多少字 参考技术A 用js写也不是很难吗？<script>function check() var name=document.getElementById("txtName");if(name.value.length>100) alert("长度大于100了!");</script>就这样了，纯手写 参考技术B <label>
<textarea name="textarea" cols="20" rows="5"></textarea>
</label>这是在html里的,也可以用JS实现,cols为列,rows为行

如何让一个字数不定，行数不定的文字居中？

这两天写页面的时候，遇到一个问题：如何让一段行数和字数不定的文字居于区块的中央

下面是我的方法，可能有点麻烦。

如果路过的各位前辈，有更好的方法，还请在留言中指出。非常感谢。

*** 结构 ***

  <div class="item">
        <div class="pic_wrapper">
            <img src="https://dummyimage.com/120.png/09f/fff" alt="作者的头像">
        </div>
        <div class="title_wrapper">
            <p class="title_inner">
                <span class="title_txt">
                    作者演讲内容的标题，这个标题可能很长，也可能很短。但是无论长度，最好都是让这个标题居中显示！
                </span>
            </p>
        </div>
    </div>

*** 样式 ***

.item{
    height: 200px;
    background: #f7f7f7;
    border: 1px solid #ccc;
    width: 120px;
        }
.pic_wrapper{
     width: 100%;
     height: 120px;
     overflow: hidden;
        }
img{
     width: 100%;
        }
.title_wrapper{
     height: 80px;
     display: table;
     font-size: 12px;
     padding: 5px;
     box-sizing: border-box;
        }
.title_inner{
      display: table-cell;
      vertical-align: middle;
        }
.title_txt{
       display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        }

实现文字居中的要点是：

1. 外层容器设置属性display:table
   2.内容容器设置属性display:tabel-cell;vertical-align:middle

这样就可以了。

大致效果如截图：

--- end---