uniapp은 텍스트가 지정된 영역을 초과하는지 어떻게 확인합니까?

모바일 개발에서는 텍스트가 지정된 영역을 초과하는지 확인해야 하는 상황에 자주 직면합니다. 예를 들어, 사용자 프로필 페이지에서 사용자의 닉네임이 표시 영역을 초과할 수 있습니다. 이 경우 닉네임을 자르거나 축약해야 합니다.

이 기사에서는 uniapp을 사용하여 텍스트가 지정된 영역을 초과하는지 확인하는 방법과 썸네일을 자르고 표시하는 방법을 소개합니다.

1. 텍스트 획득 여부는

uniapp에서는 WeChat 애플릿의 API를 사용하여 텍스트 노드의 정보를 얻을 수 있습니다. wx.createSelectorQuery() 메서드를 사용하여 페이지 노드를 가져온 다음 select() 메서드를 사용하여 텍스트 노드를 가져온 다음 마지막으로boundingClientRect() 메서드를 사용하여 노드의 위치와 크기를 가져옵니다.

구체적인 코드는 다음과 같습니다.

// 在页面中添加一个id为“text-wrapper”的文本节点
<view id="text-wrapper">{{text}}</view>

<!-- JS代码 -->
onReady() {
  wx.createSelectorQuery().select('#text-wrapper').boundingClientRect(rect => {
    console.log(rect.width)  // 文本宽度
    console.log(rect.height) // 文本高度
  }).exec()
}

위 코드를 통해 텍스트 노드의 너비와 높이 정보를 얻을 수 있습니다. 다음으로 이를 컨테이너의 너비 및 높이와 비교하여 텍스트가 이를 초과하는지 확인할 수 있습니다.

2. 텍스트 자르기

텍스트가 컨테이너를 초과하는 경우 텍스트를 자르고 내용의 일부만 표시할 수 있습니다. uniapp에서는 잘림을 위해 js의 substr() 메서드나 Slice() 메서드를 사용할 수 있습니다.

구체적인 코드는 다음과 같습니다.

// 在页面中添加一个宽度为200px的容器
<view class="container">

  // 在容器中添加一个id为“text-wrapper”的文本节点
  <view id="text-wrapper">{{text}}</view>

</view>

<!-- JS代码 -->
onReady() {
  wx.createSelectorQuery().select('#text-wrapper').boundingClientRect(rect => {
    if (rect.width > 200) {
      let len = Math.floor(200 / (rect.width / this.text.length))  // 根据容器宽度计算字符数
      this.text = this.text.substr(0, len) + '...'  // 截断字符串并添加省略号
    }
  }).exec()
}

위 코드에서는 텍스트 노드의 너비가 컨테이너의 너비를 200px 초과하는지 여부를 감지하여 표시할 수 있는 문자 수를 계산합니다. 그런 다음 substr() 메서드를 사용하여 텍스트를 자르고 끝에 줄임표를 추가합니다.

3. 썸네일에 텍스트 표시

텍스트를 자르는 것 외에도 썸네일 표시를 통해 전체 내용을 표시할 수도 있습니다. uniapp에서는 CSS text-overflow 속성과 ellipsis 키워드를 사용하여 썸네일 효과를 얻을 수 있습니다.

구체적인 코드는 다음과 같습니다.

// 在页面中添加一个宽度为200px、高度为40px的容器
<view class="container">

  // 在容器中添加一个id为“text-wrapper”的文本节点
  <view id="text-wrapper">{{text}}</view>

</view>

<!-- CSS代码 -->
.container {
  width: 200px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

위 코드에서는 컨테이너의 오버플로 속성을 Hidden으로 설정하여 컨테이너 너머의 내용을 숨깁니다. 그런 다음 text-overflow 속성과 ellipsis 키워드를 사용하여 줄임표를 추가하고 공백 속성을 사용하여 텍스트가 줄바꿈되지 않도록 합니다.

요약

uniapp과 WeChat 애플릿에서 제공하는 API와 CSS 스타일을 사용하면 텍스트 초과 여부를 쉽게 판단하고, 텍스트를 자르고, 텍스트를 축약된 형태로 표시할 수 있습니다. 실제 개발에서는 특정 요구 사항에 따라 적절한 방법을 선택하면 애플리케이션의 사용자 경험을 효과적으로 향상시킬 수 있습니다.

위 내용은 uniapp은 텍스트가 지정된 영역을 초과하는지 어떻게 확인합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!