how my output should look like我是初学者！在我的代码中，我有一个输入区域，文本区域和一个按钮。根据我的代码，它正在显示来自框内文本区域的输入（使用CSS创建）。仅当我们输入数据时才会显示。问题-现在，当我们从“ id2”输入内容时，即如果“关于”部分超过20个字符，我想在第21个字符的开头添加“显示更多”按钮，并在末尾添加一个显示较少的按钮。还告诉我一种改变结果的方法，如果我们更改输入字段并再次按Enter键。my css code::
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="SectionC-1.css">
</head>
<body>
Name: <input type="text" id="id1"><br>
About:<textarea rows="4" cols="50" id="id2"></textarea><br>
<button onclick="display()">Add New Book</button>
<div class ='container23' id = "msg">
<div id = "msg2">
</div>
</div>
</body>
<script>
function display(){
var name = document.getElementById("id1").value;
var about = document.getElementById("id2").value;
document.getElementById("msg2").innerHTML ="<b>"+"Name :"+ name +"
</b>"+ "<br>" + about;
}
</script>
我的代码的外观将为此上传图片