React Native 空白:绝对定位文本节点的 nowrap 宽度

Owe*_*ack 9 react-native

在 HTML/CSS 中,如果您希望绝对定位的元素展开得比其父元素更宽以在一行中容纳其所有文本,则可以使用 white-space: no-wrap

.parent {
  position: relative;
  width: 100px;
}
// text content of this node is wider than 100px
.child {
  position: absolute;
  white-space: nowrap;
}
Run Code Online (Sandbox Code Playgroud)

子元素的宽度将刚好适合一行中的所有文本。TextReact Native 中的组件没有办法做到这一点。您必须指定一个固定的数字宽度,否则 Text 组件将在父宽度处最大化。有办法吗?

nat*_*awa 12

想通了,答案很简单。

文本换行可以使用<Text>组件的内置接口指定numberOfLines,而不是 CSS。

<Text numberOfLines={1}>Foobar</Text>
Run Code Online (Sandbox Code Playgroud)

可以在此处找到相关文档。

  • 这会截断文本并附加省略号 (2认同)