Feature Request: Add 'title word-break' appearance option

[hazzuk]

Under Apperance settings, a new switch option should be added:

Title word wrapping Allow titles to wrap naturally

This would prevent titles breaking onto a new line mid-word.

• default/current

  .arco-typography {
  word-break: break-all;
  }

• new

  .arco-typography {
  word-break: normal;
  }

p.s. Thank you for your awesome work on ReactFlux, it's rare to find such a refined app like this one!

[NekoAria]

First of all, thank you for providing such a comprehensive and effective feature request with all the necessary information.

I believe this modification might not need to be a user configuration option, but rather could be more suitable as a default style change. In fact, we can limit this style modification to only affect article titles by doing the following:

.article-title.arco-typography {
  word-break: normal;
}

Lastly, we appreciate that you enjoy our app. Please feel free to let us know if you have any other issues or feature requests in the future.

[hazzuk]

Thank you for the fast response @NekoAria

Testing this change, it has correctly applied to article titles.

However, with this limited scope, it doesn't change titles inside article cards:

That would require some additional CSS:

.article-card-title.arco-typography {
    word-break: normal;
}

[NekoAria]

However, if the title in the article cards is given the above CSS styles, it will look very strange:

[hazzuk]

I don't think we could of asked for a better test case than that Vulkan article 😅

Changing the cards text alignment will prevent any excessive gaps of whitespace:

.article-card-title.arco-typography {
    word-break: normal;
}
.card-custom-style {
    text-align: left;
}

[NekoAria]

Haha, indeed.

The suggestions for modification you provided are great.

I'm not good at CSS. So the styling aspect is mainly handled by another contributor, who is the owner of this GitHub repository.