文本域
DIV转为文本域
<!--作为文本域-->
<div contenteditable> <div>
溢出隐藏自动拼接省略号
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.demo {
width: 140px;
display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示。*/
overflow: hidden; /*超出的文本隐藏*/
text-overflow: ellipsis; /*溢出用省略号显示*/
-webkit-line-clamp: 2; /*这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。*/
-webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
vertical-align: text-bottom; /*属性设置元素的垂直对齐方式。*/
white-space: pre-line; /*解析换行符*/
word-break: break-all; /*断行规则： normal(使用浏览器默认的换行规则。)|break-all(允许在单词内换行。)|keep-all(只能在半角空格或连字符处换行。);*/
}
</style>
</head>
<body>
<div class="demo">You're going to be a quiet adult. Don't get emotional, don't miss secretly, don't look back. Live your own life. You have to be obedient, not all fish will live in the same sea</div>
<div class="demo">你要做一个不动声色的大人了。不准情绪化，不准偷偷想念，不准回头看。去过自己另外的生活。你要听话，不是所有的鱼都会生活在同一片海里。</div>
</body>
</html>