Text in Semantic UI React is breaking the grid only from the right side

user_9146347 0
Viewed 830

In Semantic UI React, I defined a grid that has two columns. If the content is long it does not break to the next line but breaking its column border to the next column. Why is this happening? is it a bug in my or Semanic UI React code?

enter image description here

Here is the corresponding code:

<Grid key={experience.id}>
  <Grid.Column mobile="12" tablet="13" computer="14">
    {experienceRoleStyle(experience.role)}
    {experienceCompanyStyle(experience.company)}
    {experienceDateStyle(getRandomDate())}
    <p className="mt-3">
      xsluixisxkhsbkxgsvkxgvsytxvkusybxkyhbsxlsunxsbhxybxsklnjxkshbkxuvsxxkshbkxjhbskuxvksvbxkhjbsjlhbxljhsbxkjhbskxhbslxsxsxsiyxhsiygxbukysbx
    </p>
  </Grid.Column>
  <Grid.Column mobile="4" tablet="3" computer="2">
    <Icon
      name={experience.company.toLowerCase()}
      floated="right"
      size="huge"
    />
  </Grid.Column>
</Grid>
semantic-ui-react semantic-ui reactjs
1 Answers

Your code is ok, all you need to add a class having word-break property to the element containing the long text. Semantic grid doesnt handle it for you but gives you freedom to choose any break strategy. You may want to read these word-wrap and word-break

This could be you class

.text-break{ word-wrap: break-word; }

and your element would look like this

<p className="mt-3 text-break"> xsluixisxkhsbkxgsvkxgvsytxvkusybxkyhbsxlsunxsbhxybxsklnjxkshbkxuvsxxkshbkxjhbskuxvksvbxkhjbsjlhbxljhsbxkjhbskxhbslxsxsxsiyxhsiygxbukysbx </p>

user_23279100
Related