Comments (5)
Having revealed this bug is helpful anyway - so thanks for the contribution 🌞
I have found an explanation for the observed behavior:
- Pages that are not optimized for mobile get enhanced with an "text inflating algorithm" aka "font boosting", if not prevented
- Chrome Device Mode emulates rendering on a mobile device and triggers said behavior
[...] When pages load, Font Boosting increases the font size of text in wide columns, so you won't have to zoom in on them as much and hence every column fits onscreen at a legible text size. - WebKit Bug Tracker
Why is this causing trouble with react-truncate?
- The calculations inside this module are based on font properties read by
.getComputedStyle()
. Unfortunately those numbers lie when font boosting is applied and return the initial font sizes - That explains why the text in your screenshot is cut to the correct line of numbers, but exceeds the boundaries on the right side
How can you fix it?
- Solution: Be explicit to the browser about rendering on mobile and add
<meta name="viewport" content="width=device-width, initial-scale=1">
to the document head - source - Hack: Apply
max-height: 999999px;
CSS property to text elements to disable font boosting - source Note: this works when you run it on an actual mobile device - the chrome emulation will still apply font boosting - Use not widely adopted properties:
text-size-adjust
in Safari and on MDN
A note on the text-expansion: This is something that you could easily implement using react-truncate. In the link you provide to ellipsis
you could toggle a variable in your parent component and provide it to the lines
prop, 0 means the text will not be truncated
from react-truncate.
Thank you for the screenshots - from your description I assume that re-sizing the window (without toggling chrome device mode) also results in re-rendering and correctly truncating the text, is that correct?
It would be helpful to know which children you provided to the component. Does the child re-render while <Truncate>
has been mounted already, for example by fetching its text-content asynchronously?
Was there any error in the console?
from react-truncate.
There were no errors in the console, and no children were passed to the component, just jsx-interpolated text ( props.foo
)
If I don't toggle chrome device mode, then resizing the window won't do anything, since it's set to the mobile width -- and my use case is mobile devices, so I didn't try on a regular browser window.
from react-truncate.
I have moved on to another module, react-ellipsify, that provided the desired behavior along with the text-expansion feature I desired, so my available time to help you troubleshoot has unfortunately been cut short for the time being.
from react-truncate.
Here you have a gist for an example <ReadMore>
component that wraps <Truncate>
from react-truncate.
Related Issues (20)
- <br> tags being added to truncated lines HOT 8
- 3rd party device recognition is blocking usage
- Maintenance status? HOT 2
- ellipsis still display when text isn't too long HOT 1
- ComponentWillUnmount ellipsis removal fails in test suites and other situations HOT 5
- Cannot set property 'font' of undefined HOT 3
- In jest tests - the ellipsis always show, regardless of whether it truncates. HOT 1
- Ellipsis not shown when text is only one word
- Truncate get error on 'width' prop when my app still work in another tab like keep-alive component
- Wrong lines calculation when width specified and having responsive container HOT 3
- React v17 support HOT 2
- Last line length changes when parent component set to display none
- Jest: Can not test onTruncate method HOT 3
- Update to React 17 HOT 5
- deleted
- wrong width of span on load HOT 2
- New release HOT 1
- React 18 support HOT 1
- Can't add as dependency in React 18 HOT 10
- Wrong line breaks
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-truncate.