如何做一个可以自动根据宽度自动换行的标签？这篇文章里，作者做了相应的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”（表示首行，只记录宽度，不移动矩形）

如何定义B端产品及B端产品经理方法论

相较于C端产品，B端产品最大的特点是：面向特定领域用户，且数量少得多，但更注重对用户专业领域操作流程的深度挖掘——也就是专业性更强，与业务的结合更紧密。

查看详情 >

设置变量currentLineWidth为当前宽度；

Case2，如果[[currentLineWidth+This.Width]]<=”[[maxLineWidth]]”（判断如果当前行剩余宽度空间足够）

接到上一行末尾；

设置新的currentLineWidth为[[currentLineWidth+10+This.width]]（里面的10是用来做为空隙，可自行更改，或者放到全局变量都行）

Case3，（空间不够）

换新行；

设置变量currentLineWidth为当前宽度。

结尾

这样一个可以自动根据宽度自动换行的标签就做好啦，快去试试看吧。