# 文字展开收起

**Repository Path**: ponymym/text_expand_and_collapse

## Basic Information

- **Project Name**: 文字展开收起
- **Description**: 文字的展开收起
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2019-12-18
- **Last Updated**: 2023-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 文字展开收起

#### 介绍
文字的展开收起

#### 使用说明

#### 基本代码：
```html
<div id="main1">哈哈啊哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈啊哈哈aaaabbbbbbbccccccccddddddaaaabbbbbbbccccccccdddddd
</div>
```
一行文字折叠：
```css
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
```
多行文字折叠：
```css
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
word-break:break-all;
```
#### 遇到的问题：
1.如何把展开放到省略后面，而不是换行
2.显示收起时，最后一行不满4个字时收起放在最后一行，否则换行放置。
如何解决见index.html里备注

#### 实现的效果：
![Image text](https://gitee.com/ponymym/text_expand_and_collapse/raw/master/img/demo.png)
#### 码云特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  码云官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5.  码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)