如何做一個可以自動根據寬度自動換行的标簽？這篇文章裡，作者做了相應的Axure教程分享，一起來看一下。
前言
“标簽（Tags）”功能用于标記、選擇、分類群組織網站内容的中繼資料。它們通常以關鍵字或短語的形式出現，以描述該内容的屬性、主題或類别。标簽的字數一般不多，但長度可能不盡相同，如果多全标簽還需要換行。比如ElementUI的Tag标簽：
示範位址：https://usrsky.axshare.com/#id=hb5pcx&g=1
一、先決知識
因為在Axure RP 8&9中，自動适應文字寬度是個麻煩事，是以請先了解一下《完美實作Axure8和9的“自動适應文本寬度”》，順便下載下傳ruler_RP9.rp檔案備用。如果對寬度不敏感也可以簡單地直接用[[字數 * 字寬]]。
此外，你可能還需要讀一下這篇文章《Axure中繼器的負坐标》。
二、教程
先建兩個全局變量：
- maxLineWidth用于表示最大寬度（非必須，也可以在互動裡寫死，還可以動态擷取父容器寬度）
- currentLineWidth記錄目前行寬度。
元件目錄與ruler_RP9.rp大同小異，我這裡寬度多加了50是為了放（叉号×）。
最後在（矩形）的“加載時”互動寫換行的邏輯，其實寫在中繼器的“每項加載時”也可以。
載入時：
Case1，如果[[Item.isFirst]]==”true”（表示首行，隻記錄寬度，不移動矩形）
設定變量currentLineWidth為目前寬度；
Case2，如果[[currentLineWidth+This.Width]]<=”[[maxLineWidth]]”（判斷如果目前行剩餘寬度空間足夠）
接到上一行末尾；
設定新的currentLineWidth為[[currentLineWidth+10+This.width]]（裡面的10是用來做為空隙，可自行更改，或者放到全局變量都行）
Case3，（空間不夠）
換新行；
設定變量currentLineWidth為目前寬度。
結尾
這樣一個可以自動根據寬度自動換行的标簽就做好啦，快去試試看吧。
本文由 @Jorkin 原創釋出于人人都是産品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協定
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。