incomplete text - Githubissues

chenweigh commented 2 years ago

Decision Table

[X] My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
[X] My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

[X] I have read the HELP document here: https://git.io/JBi6R
[X] I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
[X] I have confirmed that this bug has not been reported yet

Description

There is half a word in the last line, when I limit the html height. So Why?

React Native Information

System:
    OS: macOS 11.3.1
    CPU: (8) arm64 Apple M1
    Memory: 141.78 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.0.1 - /var/folders/f6/qc85ty992z1_6p0tpm8wwzvr0000gn/T/yarn--1636620617689-0.33693234775701986/node
    npm: 8.1.0 - /opt/homebrew/bin/npm
    Watchman: 2021.10.18.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
    Android SDK:
      API Levels: 28, 29, 30, 31
      Build Tools: 30.0.2, 30.0.3, 31.0.0
      System Images: android-31 | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7678000
    Xcode: 13.0/13A233 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.0 => 0.64.0 
    react-native-macos: Not Found

RNRH Version

react-native-render-html: 5.1.0

Tested Platforms

[ ] Android
[X] iOS
[ ] Web
[ ] MacOS
[ ] Windows

Reproduction Platforms

[ ] Android
[X] iOS
[ ] Web
[ ] MacOS
[ ] Windows

Minimal, Reproducible Example

<HTML
    containerStyle={{
        height: 60,
        backgroundColor: 'red',
    }}
    source={{
        html: content,
    }}
    baseFontStyle={{
        color: '#ffffff',
        lineHeight: 20,
    }}
/>

<HTML
    containerStyle={{
        backgroundColor: 'blue',
    }}
    source={{
        html: content,
    }}
    baseFontStyle={{
        color: '#ffffff',
        lineHeight: 20,
    }}
/>

Additional Notes

The Text

豆瓣评分：6.5↵类型：科幻 / 惊悚 / 恐怖↵主演：杰克·吉伦哈尔 / 丽贝卡·弗格森 / 瑞安·雷诺兹 / 真田广之 / 阿利安·巴克瑞↵↵精彩影评：创意可以说来自“异形”，但凭借反转的结尾脱颖而出。片名“Life”充满哲理：生命从杀戮中来，人类的死亡只是异星物种求生的本能。@同志亦凡人中文站

The Image

https://github.com/chenweigh/chen/blob/master/1.png

jsamr commented 2 years ago

Hi @chenweigh! Since you are forcing the height of the container, and there is yet content to draw, React Native layout engine (Yoga) will attempt to pack as much content in the available space, that is totally expected.