文字过多，自动显示展开内容

作者: 骑着小猪看大海 | 来源:发表于2022-05-19 10:06 被阅读0次

文字过多，自动显示展开内容
css：文字超长后显示为 "..."
iOS - TextView显示省略号
Element表格
一个TextView实现文本展开功能
小程序view标签内数字/字母显示不换行
小程序 — 展开/收起
一行显示文字内容，自动调节文字大小
3-3. input按钮
【RPG Maker MV插件】YEP_MessageCore修

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ellipsis {
overflow: hidden;
height: 200px;
line-height: 25px;
border: 5px solid #AAA;
}

.ellipsis:before {
  content: "";
  float: left;
  width: 5px;
  height: 200px;
}

.ellipsis>*:first-child {
  float: right;
  width: 100%;
  margin-left: -5px;
}

.ellipsis:after {
  content: "\02026";

  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;

  float: right;
  position: relative;
  top: -25px;
  left: 100%;
  width: 3em;
  margin-left: -3em;
  padding-right: 5px;

  text-align: right;


  background-size: 100% 100%;
  background: -webkit-gradient(linear, left top, right top,
      from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
  background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

</style>
</head>

<body>
<div style="width: 200px; height: 200px;">
<div class="ellipsis">
<div>
AutoComplete 组件是一个支持自动提示的 Input 组件，因而其不具有
AutoComplete 组件是一个支持自动提示的 Input 组件，因而其不具有
AutoComplete 组件是一个支持自动提示的 Input 组件，因而其不具有
AutoComplete 组件是一个支持自动提示的 Input 组件，因而其不具有
AutoComplete 组件是一个支持自动提示的 Input 组件，因而其不具有
AutoComplete 组件是一个支持自动提示的 Input 组件，因而其不具有
AutoComplete 组件是一个支持自动提示的 Input 组件，因而其不具有
AutoComplete 组件是一个支持自动提示的 Input 组件，因而其不具有
AutoComplete 组件是一个支持自动提示的 Input 组件，因而其不具有
AutoComplete 组件是一个支持自动提示的 Input 组件，因而其不具有
</div>
</div>
</div>
</body>