在Axure8和9中，有一個設(shè)置叫做“自動適應(yīng)文本寬度（Fit to Text Width）”，然而實際用起來可能會出現(xiàn)一些問題。本文分享了一個實現(xiàn)Axure8和9的“自動適應(yīng)文本寬度”的方法，一起來看一下吧。

在Axure8和9中，有一個設(shè)置叫做“自動適應(yīng)文本寬度（Fit to Text Width）”，不過大家發(fā)現(xiàn)其實只在設(shè)計時有用，在預(yù)覽時完全沒有效果，而且放在中繼器中還會出現(xiàn)數(shù)據(jù)變動時統(tǒng)一寬度的問題。

一、現(xiàn)狀

網(wǎng)上目前的解決方法有用等寬字體的，有用字?jǐn)?shù)乘固定值14px的……但只能解決部分問題，對于富文本或者中英文混和文本無能為力。雖然Axure10已經(jīng)支持，但是很多人還在用Axure8和9，所以這里教大家一個完美的方案。

演示：

https://5gn5xg.axshare.com/#id=hb5pcx&g=1

二、準(zhǔn)備

首先，我們要先做一把“尺”，方法如下：

第1步：拖出一個“動態(tài)面板”，將其命名為“ruler”；

第2步：將“ruler”設(shè)置為“水平滾動”并取消“自動適應(yīng)文本寬度”；

第3步：將“ruler”設(shè)置為 19999px寬（必須） 和 50px高（隨意）。

第4步：拖出一個“文本標(biāo)簽（Label）”，命名為“scale”；

第5步：將“scale”設(shè)置為：

• x坐標(biāo)：20000px
• y坐標(biāo)：0px

第6步 刪除所有字符并單擊“自動適應(yīng)文本寬度”，它會自動變?yōu)?1px 寬度。

好了，這把“尺”就快完成了。

三、測試

第1步：拖出“矩形 1（Box 1）”，將其命名為“box no padding”，并將左右填充設(shè)置為 0px；

第2步：將“scale”和“box no padding”設(shè)置為相同的字體、相同的字體樣式、相同的字體大??；

第3步：拖出“文本字段”；

第4步：添加“文本改變時”交互。

預(yù)覽一下，在文本輸入隨便中英文甚至其他語言，都可以，文章后面有文件下載。

最驚奇的在于：它在中繼器中也能用并且很好用。

四、使用方法

您只需要做三件事：

1. 將文本設(shè)置到“scale”里
2. 滾動到“scale”組件
3. 將“box”設(shè)置為新大?。?biāo)尺.scrollX + box.padding ）

只要保證你的文字組件的字體、樣式、大小、內(nèi)容與“尺”里的一模一樣就可以。

五、文件下載及預(yù)覽

Axure 8&9演示文件：

ruler_RP9.rp（78.5 KB）

ruler_RP8.rp（87.2 KB）

預(yù)覽：

https://uvji3u.axshare.com/#id=ug4988&g=1

預(yù)告：

后面會出一個中繼器實時拖放的教程，比如手機圖標(biāo)整理：

https://5gn5xg.axshare.com/#id=whwe5s&g=1

敬請期待。