Nativescript 如何溢出文本？

Question

我在 Vue.js 中使用 Nativescript 并试图溢出文本。我的文字在 Span inside of TextField inside of GridLayout with 450 width and height.我希望当文本长度变得大于 GridLayout 的布局时，只是为了溢出它，从布局中脱身。就这样：

Here 是我在操场上的示例，下面是源代码。我正在使用 GridLayout，因为当我使用 AbsoluteLayout,FlexboxLayout 或 StackLayout 时 NS Gestures 会出现一些问题。 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，但没有给出预期的结果。

Answer 1

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

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

<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>

Nativescript 如何溢出文本？

Nativescript how to overflow text?

css

nativescript

nativescript-vue