애플릿 텍스트가 오버플로되면 어떻게 줄임표로 표시할 수 있습니까?

이 글에서는 바이두 스마트 애플릿 개발 시 넘치는 텍스트를 타원으로 표시하는 방법을 소개합니다.

현재 모바일 단말기에서 개발된 디스플레이 인터페이스에서는 텍스트의 양이 너무 길면 사용자의 편의성을 높이기 위해 화면의 너비, 높이 등의 요인으로 인해 텍스트가 완전히 표시되지 않을 수 있습니다. 경험상 지금은 넘쳐나는 텍스트를 제거해야 합니다. 텍스트는 타원으로 표시됩니다.

다음으로 다음 텍스트 콘텐츠에 대한 줄 텍스트 오버플로 스타일을 구현할 수 있는 방법을 살펴보겠습니다.

1. 한 줄 텍스트 오버플로
2. 다줄 텍스트 오버플로: 5줄 미만의 모든 콘텐츠가 5개 이상 표시됩니다. (5줄 포함) 5줄만 표시되고, 5줄을 초과하면 타원이 표시됩니다. 5줄 이상은 확장 버튼이 표시됩니다. 확장하려면 클릭하여 모든 콘텐츠를 표시하고 축소 버튼을 클릭하면 축소하여 콘텐츠를 축소하고 확장 버튼을 표시합니다.

긴 대나무 숲, 광활한 녹지, 아주 조용하고 조용하며 자연스럽게 도시의 번잡함이 없습니다. 비가 천천히 내리면 녹색 가지와 잎에 옅은 연기가 안개나 구름처럼 피어오르며 마치 수묵화처럼 향기와 향기가 가득하며 누구의 꿈인지 모르겠습니다. 더욱 황홀한 것은 흩어지고 흩어지며 소리가 되고 노래가 되는 아름다운 빗소리이다. 이때 비가 가늘게 내리고, 대나무가 줄지어 있고, 바람이 불고, 마음이 속삭이는 빗소리를 듣는 사람은 가슴 친구입니다.

Single line text Overflow

1.js 파일에 텍스트 내용을 입력합니다:

Page({
	    data: {
	        content:'人要拿得起，也要放得下。拿得起是生存，放得下是生活;拿得起是能力，放得下是智慧。有的人拿不起，也就无所谓放下;有的人拿得起，却放不下。拿不起，就会一事无成;放不下，就会疲惫不堪。人生外在的一切最终丝毫也带不走，晚放下不如早放下。放下无谓的负担，才能一路自在。'
	    }
	});

2. CSS 파일에서 text-overflow: ellipsis를 사용하여 끝을 설정합니다. 후행 줄임표를 표시하는 줄: text-overflow: ellipsis设置行尾显示尾省略号：

   white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */

多行文本溢出

5 行以下的内容全显示

1.在js文件中，输入文本内容：

	Page({
	    data: {
	        content:'人要拿得起，也要放得下。拿得起是生存，放得下是生活;拿得起是能力，放得下是智慧。有的人拿不起，也就无所谓放下;有的人拿得起，却放不下。拿不起，就会一事无成;放不下，就会疲惫不堪。人生外在的一切最终丝毫也带不走，晚放下不如早放下。放下无谓的负担，才能一路自在。'
	    }
	});

2.在css文件中使用text-overflow: ellipsis设置行尾显示尾省略号，多行文本溢出：

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5; /* 指定显示文本的行数 */
	overflow: hidden; /* 超出隐藏 */

5行以上（含5行）只显示5行，超出部分省略号展示

1.在js文件中，输入文本内容：

Page({
	    data: {
	        content:'人要拿得起，也要放得下。拿得起是生存，放得下是生活;拿得起是能力，放得下是智慧。有的人拿不起，也就无所谓放下;有的人拿得起，却放不下。拿不起，就会一事无成;放不下，就会疲惫不堪。人生外在的一切最终丝毫也带不走，晚放下不如早放下。放下无谓的负担，才能一路自在。'
	    }
	});

2.在css文件中使用text-overflow: ellipsis

display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5; /* 指定显示文本的行数 */
	overflow: hidden; /* 超出隐藏 */
	text-overflow: ellipsis; /* 超出部分显示省略号 */

Multi-line text Overflow

5줄 이하의 내용은 모두 표시됩니다

1. js 파일에 텍스트 내용을 입력합니다:

<view class="container">
	<view class="title">
		<text class="title_txt">hello，我是测试demo</text>
	</view>
	<view class="content {{isShow ? &#39;on&#39; : &#39;&#39;}}">
		悠悠竹林，万顷翠色，几多清幽和宁静，自然没有城市的喧嚣和杂乱。若有雨徐徐飘落，在绿绿的枝叶上腾起袅袅轻烟，如雾，如云，更似一幅水墨丹青，流芳沁馨，不知泊了谁的梦怀。更醉人的是那动听的雨声，疏疏落落，潇然成音成曲。此时，雨为纤指竹为弦，清风流韵，细弹心语，听雨的人，便是知音。
	</view>
	<block s-if="{{lineNum > 4}}">
		<view class="btn" bindtap="open">{{isShow ? &#39;收起&#39; : &#39;展开&#39;}}</view>
	</block>
</view>

2. CSS 파일에서 text-overflow: ellipsis를 사용하여 후행 줄임표를 표시하도록 줄 끝을 설정합니다. 여러 줄의 텍스트 오버플로:

.title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 25rpx;
}

.title_txt {
    font-size: 34rpx;
    color: #2b2b2b;}

.content {
    text-indent: 2em;
    height: auto;
    overflow: hidden; /* 超出隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 5; /* 指定显示文本的行数 */
    -webkit-box-orient: vertical;
    line-height: 30px; /* 规定的行高 */
    padding: 0 25rpx;
    font-size: 30rpx;
    color: #888;}

.content.on {
    display: block;
    text-overflow: clip;
    overflow: visible;
}

.btn {
    text-align: center;
    color: #333;}

5줄 이상인 경우(5줄 포함) , 5줄만 표시되고 나머지 부분에는 줄임표가 표시됩니다

1. js 파일에 텍스트 내용 ：

/**
 * 默认收起状态，isShow作为控制显隐的开关
 * 点击按钮isShow的状态值取反即可。
 * 获取行数的计算方式：
 * 行数 = 内容高度/ 行高
 */
Page({
    data: {
        isShow: false,
        lineNum: 5
    },    open() {
        this.setData({
            isShow: !this.data.isShow
        });
    },    onShow() {
        const query = swan.createSelectorQuery();
        query.select('.content').boundingClientRect();
        query.exec(res => {
            const LineHeight = 30; // 行高
            const LineNum = res[0].height / LineHeight; // 行数            if (LineNum < 5) {
                this.setData({
                    lineNum: LineNum
                });
            }
        });
    }
});

2을 입력합니다. text-overflow: ellipsis를 사용하세요. CSS 파일에서 후행 줄임표를 표시하도록 줄 끝을 설정하면 여러 줄 텍스트가 오버플로됩니다. rrreee

🎜🎜🎜확장 버튼이 5줄 이상 표시됩니다 🎜🎜🎜클릭 확장하여 전체 콘텐츠를 표시하고 축소 버튼을 클릭하세요. 자세한 내용을 보려면 도구에서 코드 조각을 가져와서 볼 수 있습니다. swanide://fragment/598981d541fda485a1715266effc213a1590053197948. 🎜🎜1. 백조 파일에 텍스트 내용을 입력하고 버튼을 설정합니다: 🎜rrreee🎜2. CSS 파일에서 텍스트 표시 줄 수를 설정합니다: 🎜rrreee🎜3 js 파일에서 기본 축소 상태를 설정합니다: 🎜rrreee. 🎜🎜 🎜🎜추천 기사: "🎜PHP🎜" "🎜미니 프로그램 개발🎜"🎜

위 내용은 애플릿 텍스트가 오버플로되면 어떻게 줄임표로 표시할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!