OT: Avoiding having Hugo breaking down words into the next line

jorgedfbranco · May 19, 2021, 10:42pm

Hello,

I was testing a new blog theme (GitHub - nodejh/hugo-theme-mini: A fast, minimalist and responsive hugo theme for bloggers.) and unfortunately I’m facing an issue, as words that would not fully fit at the end of a line are being broken down in very ugly ways. How can I prevent this? I think this was not happening with my previously, but I’m not entirely sure.

Thanks!

pamubay · May 19, 2021, 11:50pm

This is not Hugo Issue, this is CSS.

the theme set word-break:break-all on that paragraph p element

github.com

nodejh/hugo-theme-mini/blob/8628c19610c7420ea776f7871d40902cf5382c25/static/css/style.css#L87

    
      
          h3 {
            font-weight: 400;
          }
          p {
            margin-block-start: 1.5em;
            margin-block-end: 1.5em;
          }
          p,
          pre {
            line-break: anywhere;
            word-break: break-all;
          }
          .markdown-image img {
            max-width: 100%;
          }
          .anchor { 
            font-size: 100%; 
            visibility: hidden; 
            color:silver;
          }
          h1:hover a,

set word-break to normal on that element.

More about word-break:

Topic		Replies	Views
Unwanted line break inserted between bullet point symbol and list element in markdown lists support	10	1046	August 19, 2023
Retain line breaks in plain text paragraph support	3	11404	December 26, 2015
Hyperlink's underline becomes too long if there is another word coming after it support	5	441	June 27, 2022
PRE code blocks getting truncated inappropriately by Hugo HTML generation - is this a bug? support	6	302	January 20, 2023
Where to edit to control generate li tag support	2	462	August 26, 2020

OT: Avoiding having Hugo breaking down words into the next line

Related Topics