How does uniapp determine whether text exceeds the specified area?

In mobile development, we often encounter a situation: we need to determine whether a piece of text exceeds the designated area. For example, on the user profile page, the user's nickname may exceed the display area. In this case, we need to truncate or abbreviate the nickname.

This article will introduce how to use uniapp to determine whether text exceeds the specified area, and how to truncate and display thumbnails.

1. Whether the text obtained exceeds

In uniapp, you can use the API of the WeChat applet to obtain the information of text nodes. Use the wx.createSelectorQuery() method to get the page node, then use the select() method to get the text node, and finally use the boundingClientRect() method to get the position and size of the node.

The specific code is as follows:

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

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

Through the above code, we can get the width and height information of the text node. Next, we can compare them to the width and height of the container to determine if the text exceeds it.

2. Truncate text

When the text exceeds the container, we can truncate the text and only display part of the content. In uniapp, you can use the substr() method or slice() method of js for truncation.

The specific code is as follows:

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

  // 在容器中添加一个id为“text-wrapper”的文本节点
  <view>{{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()
}

In the above code, we detect whether the width of the text node exceeds the width of the container by 200px. If it exceeds, we calculate the number of characters that can be displayed. Then use the substr() method to truncate the text and add an ellipsis at the end.

3. Thumbnail display of text

In addition to truncating text, we can also display the complete content through thumbnail display. In uniapp, you can use the CSS text-overflow attribute and the ellipsis keyword to achieve the thumbnail effect.

The specific code is as follows:

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

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

</view>

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

In the above code, we hide the content beyond the container by setting the overflow attribute of the container to hidden. Then use the text-overflow attribute and the ellipsis keyword to add ellipsis, and use the white-space attribute to keep the text from wrapping.

Summary

By using the API and CSS styles provided by uniapp and WeChat applet, we can easily determine whether the text exceeds, truncate the text, and display the text in abbreviated form. In actual development, choosing the appropriate method according to specific needs can effectively improve the user experience of the application.

The above is the detailed content of How does uniapp determine whether text exceeds the specified area?. For more information, please follow other related articles on the PHP Chinese website!