如何在AS3 TextField中的两个HTML段落之间设置垂直空间(前导)?

时间:2010-07-06 04:39:57

标签: flash actionscript-3

有没有办法在AS3 TextField中控制两个HTML段落之间的垂直空间?

我理解并通过AS3成功应用了CSS样式,并且还使用了TextFormat类。

我仍然无法控制结束和开放<p>标记之间的垂直空间:

txt.htmlText = "<p>First paragraph here.</p><p>Second paragraph here.</p>";

上面的示例使用正确的字体和字母间距进行渲染,但如果txt.condenseWhite = false,则段落之间的间距要么过高两倍,要么txt.condenseWhite = true过于浓缩。

由于AS3中只有margin-leftmargin-right可用的CSS属性,而不是margin-topmargin-bottom,我感到很茫然。

谢谢!

3 个答案:

答案 0 :(得分:5)

如果您不是仅使用"</p><br />"替换,而是插入"</p><p class = 'space'><br/></p>"

然后设置css中space类的行距和行高,比如说

.space {font-size:1px;
    leading:5px;
    }

您可以根据需要调整空间

答案 1 :(得分:1)

我完成它的方式 - 这有点像黑客,但效果很好 - 是在每个段落关闭后动态添加<br />标记。一点正则表达式可以解决这个问题:

// raw string
var myText:String = "<p>This is the first paragraph.</p><p>This is the second paragraph.</p>";

var myTextField:TextField = new TextField();
myTextField.multiline = true;
myTextField.wordWrap = true;
addChild(myTextField);

myTextField.htmlText = fixClosingP(myText);

// adds "<br />" after every occurrence of "</p>"
function fixClosingP(input:String):String {
    var r:RegExp = /<\/p>/gi;
    return input.replace(r, "</p><br />");
}

它不会给你像素级别的间距控制,但它基本上插入一个完整的中断,在大多数情况下效果都很好。

答案 2 :(得分:0)

我能够通过为每个HTML段落创建一个新的TextField实例来实现它。

这是一个简短的例子:

//Set the default spacing (leading) between paragraphs
const PARAGRAPH_LEADING:int = 10;

//Create first TextField instance
var t:TextField = new TextField();
addChild(t);
t.x = 0;
t.y = 0;
t.multiline = true;
t.wordWrap = true;
t.width = 300;
t.autoSize = TextFieldAutoSize.LEFT;
t.border = true; //Just for the example
t.condenseWhite = true;
t.htmlText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a odio sed odio dignissim tincidunt vel in nisi. Aenean eu sem mauris, ac scelerisque eros. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque rutrum porttitor eros sed vulputate. Sed mollis eros quis augue hendrerit lobortis. Quisque velit neque, placerat id tincidunt id, venenatis id felis. Ut in dolor eros.";

//Create second TextField instance
var t2:TextField = new TextField();
addChild(t2);
t2.x = 0;
t2.y = t.y + t.height + PARAGRAPH_LEADING; 
t2.multiline = true;
t2.wordWrap = true;
t2.width = 300;
t2.autoSize = TextFieldAutoSize.LEFT;
t2.border = true; //Just for the example
t.condenseWhite = true;
t2.htmlText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a odio sed odio dignissim tincidunt vel in nisi. Aenean eu sem mauris, ac scelerisque eros. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque rutrum porttitor eros sed vulputate. Sed mollis eros quis augue hendrerit lobortis. Quisque velit neque, placerat id tincidunt id, venenatis id felis. Ut in dolor eros.";

我还添加了一个控制字母间距(TextFormat.letterSpacing)的TextFormat实例。

而且,为了控制整体领先,我必须实现列出的here解决方案,其中<textformat>标记附加到字符串,该标记将在TextField中显示为htmlText

示例:

var str: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a odio sed odio dignissim tincidunt vel in nisi.";
str = '<textformat leading="2">' + str + '</textformat>';