Nativescript如何溢出文本？答案

【问题标题】：Nativescript how to overflow text?Nativescript如何溢出文本？
【发布时间】：2019-08-04 12:00:12
【问题描述】：

我正在使用带有 Vue.js 的 Nativescript 并试图溢出文本。我的文字在Span 内TextField 内GridLayout 内，宽度和高度为450。我想当文本长度变得大于 GridLayout 的布局时，只是为了溢出它，从布局中脱离出来。就这样：

Here 是我在操场上的示例示例，下面是源代码。我正在使用GridLayout，因为当我使用AbsoluteLayout,FlexboxLayout 或StackLayout 时，NS 手势存在一些问题。 TextField 因为有时我想编辑文本。还有Span 而不是Label，因为我的代码有一些细节。

<template>
    <Page>
        <GridLayout width="450" height="450" columns="150, 150,150" rows="150, 150,150">
            <TextField  id="textField" editable="false" backgroundColor="#43b883"
                row="0" col="0">
                <FormattedString>
                    <Span text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
                </FormattedString>
            </TextField>

            <TextView id="textView" editable="false" backgroundColor="#1c6b48"
                row="1" col="0">
                <FormattedString>
                    <Span text="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
                </FormattedString>
            </TextView>

            <Label id="label" row=" 2" col="0" text="LabLorem ipsum dolor sit amet, consectetur adipiscing elit.el" />
        </GridLayout>      
    </Page>
</template>

有没有办法让我想要的文字溢出？

或者有其他方法吗？

我可以在 NS 中使用类似 css 属性 word-wrap 的东西吗？尝试使用 textWrap 和 Label，但没有给出预期的结果。

【问题讨论】：

标签： css nativescript nativescript-vue

【解决方案1】：

overflow 在 {N} 环境中不是有效的 CSS 属性。

但是您可以通过使用 AbsoluteLayout 并在 iOS 中将 clipToBounds 设置为 false / 在 Android 中在父视图的本机视图上调用 setClipChildren(false) 来让标签溢出到其父视图之外。

<template>
    <Page backgroundColor="gray">
        <AbsoluteLayout backgroundColor="red" width="200" height="200"
            ios:clipToBounds="false" @loaded="onLoaded">
            <Label class="m-5 h2 text-center" color="white"
                text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit."></Label>

        </AbsoluteLayout>
    </Page>
</template>

<script>
    export default {
        data() {
            return {};
        },
        methods: {
            onLoaded: function(args) {
                if (args.object.android) {
                    args.object.android.getParent().setClipChildren(false);
                    args.object.android.getParent().setClipToPadding(
                        false);
                }
            }
        }
    };
</script>

【讨论】：

再次拯救了这一天。谢谢