­ in text, hyphens

When I try to use ­ do manually decide where to get hyphens it prints it out as text if i use
prismic-rich-text :field="slice.primary.description"

Do you know how to fix this?

Hey @victorthevictoriousv, which is the output you're expecting to render from the description Rich Text field, and what are you getting instead?

This thread has been closed due to inactivity. Flag to reopen.

Hey @Pau , I'm running into an issue with this as well. I'm struggling to get hyphens: auto to work when using and from @prismicio/react (I realize this post is tagged with nuxtjs, happy to start a new thread). Hoping someone can help me understand why this isn't working.

Would either like to 1) get hyphens: auto working, or 2) at least figure out how to get ­ working if the former isn't possible.

  1. <div class='container'><PrismicRichText field={document.data.title} ></PrismicRichText></div> does not hyphenate automatically on word breaks where CSS contains .container { hyphens: auto } and document.data.title is a rich text field containing "abbreviation"

Output:
"abbreviation"
Expected:
"abbrevia-
tion"

  1. <div class='container'><PrismicRichText field={document.data.title} ></PrismicRichText></div> does not hyphenate automatically on word breaks where CSS contains .container { hyphens: manual } and document.data.title is a rich text field containing "abbrevia­tion"

Output:
"abbrevia­tion"
Expected:
"abbrevia-
tion"

abbreviation

Thanks for any help you can provide!

Hi Taylor I think you might need to modify the output of the Rich Text field, and provide a list of component overrides to the components prop. The list of components maps an element type to its React component. Here is an example using custom components for first-level headings and paragraphs:

<PrismicRichText
  field={document.data.example_rich_text}
  components={{
    heading1: ({ children }) => <Heading className="container">{children}</Heading>,
    paragraph: ({ children }) => <p className="paragraph">{children}</p>,
  }}
/>

Learn more about customizing Rich Text output in HTML Serializing.

Thanks for the quick response! After some more investigating, it turns out that the words weren't being hyphenated in Chrome and Firefox because they were capitalized - didn't think to consider that..

So now I'm stuck trying to render the rich text with &shy; soft hyphens and hyphens: manual on the container element. I've tried using component overrides similar to your example with <PrismicRichText>, <PrismicText>, and also tried using asHTML() and asText() from the prismicio/helpers package.

The only thing I've been able to get to work is using dangerouslySetInnerHTML, which is fine, but I'm wondering if there is a better Prismic way to go about it. I read into custom labels as well. Is that how people are handling issues like this?

RichText field:
Re&shy;design

Expected:
Re- design

Actual output for all but the asHTML() method varies across browsers.. one of Re&shy;design, Re&amp;shy;design, while asHTML() outputs <p>Re&shy;design</p>

Thanks again!

Where are you doing your styling for this? Is it globally or scoped in the component?