React text overflow ellipsis code#

First as a ++code>Text++/code>, explaining the auto-sizing of a text works.I will apply it to our ++code>title++/code> element, following its two characteristics: It really allows to understand quickly what goes on screen. This is my favorite mental model when talking about Layout. Content can be children nodes, or 'pure' content (words for a text, pixels for an image.). content-driven:when the element is constrained by its content, and fits the minimal size so what's inside can be seen.parent-driven: when the element is constrained by its parent, and grows to reach its parent's borders, or shrink to fit in.I like to think there is 2 ways, and 2 ways only, to understand how an element compute its width and height, when not given: To answer this question, we 'simply' have to answer to the most fundamental question in layout: How the size of an element is computed when it's not explicitly fixed in its style? 2.1 Understanding the auto-sizing of an element: the parent vs content-driven model Why were the text too large in the first place? This is the second question I asked myself, and the answer was trickier than I thought.Ģ. why was the initial text too large in the first place? Why did we have to make it shrink? Here is a drawing that helped me fix the idea:īut. ++code>flexGrow++/code> (and ++code>flexShrink++/code>) controls the size of an item along what is usually called the main axis of the container (see the React Native doc) : in our case, horizontally. I used to believe that it was because of the ++code>flexGrow++/code> part that ++code>flex: 1++/code> worked we had to allow the element to grow vertically, so the text could gently wrap in a wider space? Nice mental model, but it's wrong! Note: If you need a reminder about Flexbox properties, I recommend this article on CSS-Tricks: clear and well illustrated, made for web CSS but really useful for React Native too. We won't discuss the ++code>flexBasis++/code> property in this article, as it has no impact in the problem. In the Flexbox layout, ++code>flex: 1++/code> is a shortcut for 3 style properties: 1.2 why does the solution works: FlexGrow & FlexShrink The Text is wrapping, but not enough so we can see it entirely. The row container is itself in a classic vertical ++code>View++/code>. But they are not impacting for the study: everything essential is above.īasically, what we have is a++code> Text++/code> in a row container, with an icon before. Used some extra padding, colors and radiuses.

React text overflow ellipsis code#

Note: You can play around with the code to obtain the screenshot, I Here is a React Native code that allows to reproduce the bug ?:

Why is the solution working? 1.1 situation Basic knowledge of React Native / Javascript - Basic knowledge of Flexbox Layoutġ. This article does not require an extended developer experience to be understood. You will need: Then, more interestingly, I explain why was the Text going off screen in the first place First why is the StackOverflow fix working 2. And after some exploration, I happily announce you that I solved it! ? I'll explain everything in this article:ġ. You see, it made a lot of reasons to want to solve this mystery. = Object.assign(, Brain after fixing the going-out Text without understanding what I did If the data-text-overflow is set to ellipsis the entire text is shown on hover.īoth of the attributes are required for data-text-overflow:Ĭlipped field: data-text-overflow='ellipsis' It can be clipped, display an ellipsis (.), or multiline. The data-text-overflow template field attribute specifies how overflowed content that is not displayed should be signaled to the user.