组件 Ellipsis 文本省略无法正常工作

[loocor]

NutUI scenes（nutui 场景）

H5（@nutui/nutui-react）

NutUI-react version（nutui-react 版本）

1.4.10

React version（react 版本）

18.2.0

Operating environment（运行环境）

dev:weapp

Citation method（引用方式）

npm

Node version（node 版本）

v19.7.0

Browser and its version（浏览器及其版本）

Wechat Devtools (1.06.2303020 Stable)

System and its version（系统及其版本）

MacOS (13.3 Beta)

Reproduction link（重现链接）

gist.github.com

<CellGroup>
        {expertInfoItems.map((expert, index) => {
          return (
            <Cell
              center
              desc={expert.state}
              icon={expert.avatar}
              key={index}
              roundRadius='0'
              title={expert.name}
              subTitle={
                <>
                  <Ellipsis content={expert.brief} />
                  {
                    expert.tags.map((tag ) => {
                      return (
                        <Tag type='success' key={tag}>{tag}</Tag>
                      )
                    })
                  }
                </>
              }
              to='/pages/sub/reserve/schedule/index'
            />
          )
        })}
      </CellGroup>

Steps to reproduce（重现步骤）

如重现链接 gist 那样，引用 Ellipsis 文本省略组件，然后在小程序中预览

What is expected?（期望的结果是什么？）

与文档描述一致

What is actually happening?（实际的结果是什么？）

发现 Ellipsis 文本省略组件外观与文档描述不一致，表现与无样式的 div 无异

[oasis-cloud]

在我们的 demo 中，并未出现你说的问题。最好能提供一个完整些的 demo，看看是不是由于配置导致的样式缺失

[star-xing-code]

动态赋值就没有样式

[little93]

同遇到问题。和官网一样的代码，也不生效，不是h5，是支付宝小程序。 nutui-react-taro版本：1.4.9 react: 18 `import { Ellipsis, Cell } from '@nutui/nutui-react-taro'; const content = 'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'; return (

);`

[oasis-cloud]

同遇到问题。和官网一样的代码，也不生效，不是h5，是支付宝小程序。 nutui-react-taro版本：1.4.9 react: 18 import { Ellipsis, Cell } from '@nutui/nutui-react-taro'; const content = 'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'; return ( <Cell> <Ellipsis content={content} direction='middle' /> </Cell> );

目前还没针对支付宝小程序进行完整测试

[xiaoyatong]

如果参考一下demo，看看是不是可以解决问题~

  const [content, setContent] = useState('')

  useEffect(() => {
    setTimeout(() => {
      const d =
        '---- NutUI 上线后我们研发团队也在不断的优化、测试、使用、迭代的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'
      setContent(d)
    }, 2000)
  }, [])

  return (
    <>
      <div className="demo">
        <h2>{translated.header}</h2>
        <Cell>
          <Ellipsis content={content} direction="start" />
        </Cell>
      </div>
    </>
  )

[xiaoyatong]

动态赋值就没有样式

动态赋值问题可以看这里，已修复： https://github.com/jdf2e/nutui-react/issues/824

[wanglianjie91]

在微信小程序端无法工作。

当我只设置content时，显示一行内容，但微信开发者工具控制台有报错 TypeError: Cannot read property 'width' of null at _callee$ (._nodemodules@nutui_nutui-react-taro_dist_esm_ellipsis.taro-cd36ab2d.js:56) at tryCatch (._nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:45) at Generator. (._nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:133) at Generator.next (._nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:74) at asyncGeneratorStep (._nodemodules@babel_runtime_helpers_esm_asyncToGenerator.js:3) at _next (._nodemodules@babel_runtime_helpers_esm_asyncToGenerator.js:22)(env: macOS,mp,1.06.2310080; lib: 3.2.0)

当我设置rows={2}时， 内容完整展示，并且控制台报错 TypeError: Cannot read property 'height' of null at _callee3$ (._nodemodules@nutui_nutui-react-taro_dist_esm_ellipsis.taro-cd36ab2d.js:96) at tryCatch (._nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:45) at Generator. (._nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:133) at Generator.next (._nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:74) at asyncGeneratorStep (._nodemodules@babel_runtime_helpers_esm_asyncToGenerator.js:3) at _next (._nodemodules@babel_runtime_helpers_esm_asyncToGenerator.js:22)(env: macOS,mp,1.06.2310080; lib: 3.2.0)

[atom258]

在微信小程序端无法工作。

当我只设置content时，显示一行内容，但微信开发者工具控制台有报错 TypeError: Cannot read property 'width' of null at _callee$ (._nodemodules@nutui_nutui-react-taro_dist_esm_ellipsis.taro-cd36ab2d.js:56) at tryCatch (._nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:45) at Generator. (._nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:133) at Generator.next (._nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:74) at asyncGeneratorStep (._nodemodules@babel_runtime_helpers_esm_asyncToGenerator.js:3) at _next (._nodemodules@babel_runtime_helpers_esm_asyncToGenerator.js:22)(env: macOS,mp,1.06.2310080; lib: 3.2.0)

当我设置rows={2}时， 内容完整展示，并且控制台报错 TypeError: Cannot read property 'height' of null at _callee3$ (._nodemodules@nutui_nutui-react-taro_dist_esm_ellipsis.taro-cd36ab2d.js:96) at tryCatch (._nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:45) at Generator. (._nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:133) at Generator.next (._nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:74) at asyncGeneratorStep (._nodemodules@babel_runtime_helpers_esm_asyncToGenerator.js:3) at _next (._nodemodules@babel_runtime_helpers_esm_asyncToGenerator.js:22)(env: macOS,mp,1.06.2310080; lib: 3.2.0)

同样遇到这个问题，nutui-react-taro版本：2.0.24

[git-royxu]

在微信小程序端无法工作。 当我设置rows={2}时， 内容完整展示，并且控制台报错如下 TypeError: Cannot read property 'width' of null at _callee$ (._nodemodules@nutui_nutui-react-taro_dist_esm_ellipsis.taro-b1533122.js:56) at tryCatch (._nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:45) at Generator. (._nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:133) at Generator.next (._nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:74) at asyncGeneratorStep (._nodemodules@babel_runtime_helpers_esm_asyncToGenerator.js:3) at _next (._nodemodules@babel_runtime_helpers_esm_asyncToGenerator.js:22)(env: macOS,mp,1.06.2306020; lib: 3.2.1)

[thep0y]

2.3.3 微信小程序中报错：

TypeError: Cannot read property 'height' of null

[ty921]

相同的问题 怎么解决？TypeError: Cannot read property 'height' of null at _callee3$ (._nodemodules.pnpm_@nutui+nutui-react-taro@2.3.3_react-dom@18.2.0_react@18.2.0_nodemodules@nutui_nutui-react-taro_dist_esm_ellipsis.taro-ov_C4kbs.js:96) at tryCatch (._nodemodules.pnpm_@babel+runtime@7.23.5_nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:45) at Generator. (._nodemodules.pnpm_@babel+runtime@7.23.5_nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:133) at Generator.next (._nodemodules.pnpm_@babel+runtime@7.23.5_nodemodules@babel_runtime_helpers_esm_regeneratorRuntime.js:74) at asyncGeneratorStep (._nodemodules.pnpm_@babel+runtime@7.23.5_nodemodules@babel_runtime_helpers_esm_asyncToGenerator.js:3) at _next (._nodemodules.pnpm_@babel+runtime@7.23.5_nodemodules@babel_runtime_helpers_esm_asyncToGenerator.js:22)(env: macOS,mp,1.06.2312061; lib: 2.33.0)