Option to wrap text

Using recommended snippet in the theme’s additional CSS does the trick:

div[class*='code-block-pro']:not(.x) pre span.line {
    white-space: pre-wrap;
}

However, to also keep the default functionality, using a class like force-wrap on the block, and changing above like the following allows to give the choice per block:

div[class*='code-block-pro force-wrap']:not(.x) pre span.line {
    white-space: pre-wrap;
}

I still feel this should be a block option though, so I will not mark as resolved just yet.

Hi

The issue has come up in the past and I’ve just decided that text wrapping isn’t a feature I want to support globally. The provided snippet is there for those who really think they need it though (fyi it might break some other features like line highlighting and blurring though)

The presence of?!important?is bad practice and makes things difficult.

Can you explain what you mean by this? What exactly is difficult? Maybe I can help with that

Hi Kevin, and thank you for the reply!

 I’ve just decided that text wrapping isn’t a feature I want to support globally.

An option like there exists for ignoring parsing shortcodes would have been nice, but fair enough, and well understood – development time is not free, even in free plugins, so I can very much relate. It is a pity that the only potential solution is putting other features at risk of breaking.

Can you explain what you mean by this?

I simply meant it is a well-known anti-pattern (a quick Google away can confirm) and a code-smell; it was more of a general statement, as it often nullifies possibilities of override no matter the selector specificity. As stated though, technical challenges for wide theme support make its usage here somewhat justifiable.

I’ve been trying to bring support to highlight/blurring with line wrapping (and that’s where !important has begun to rear its ugly head). Below is some updated code, if it helps anyone. Empty lines still don’t highlight on hover because they end up with a height of 0 though, and that’s currently my main focus.

div[class*='code-block-pro'][class*='force-wrap'] pre span.line.cbp-line-highlight .cbp-line-highlighter,
div[class*='code-block-pro'][class*='force-wrap'] pre span.line.cbp-no-blur:hover .cbp-line-highlighter,
div[class*='code-block-pro'][class*='force-wrap'].cbp-highlight-hover:not(.cbp-blur-enabled:not(.cbp-unblur-on-hover)) pre span.line:hover .cbp-line-highlighter,
div[class*='code-block-pro'][class*='force-wrap']:not(.code-block-pro-editor) pre span {
    white-space: pre-wrap;
    min-height: 100% !important;
    min-width: 100% !important;
}

Code to put in theme’s Additional CSS field – updated for empty lines support with highlight and blur:

/**
 * Line wrap support
 *
 * Use the class force-wrap in the block under
 * "Advanced" > "Additional CSS class(es)"
 */
div[class*='code-block-pro'][class*='force-wrap'] pre span.line.cbp-line-highlight .cbp-line-highlighter,
div[class*='code-block-pro'][class*='force-wrap'] pre span.line.cbp-no-blur:hover .cbp-line-highlighter,
div[class*='code-block-pro'][class*='force-wrap'].cbp-highlight-hover:not(.cbp-blur-enabled:not(.cbp-unblur-on-hover)) pre span.line:hover .cbp-line-highlighter,
div[class*='code-block-pro'][class*='force-wrap']:not(.code-block-pro-editor) pre span {
    white-space: pre-wrap;
    min-height: 100% !important;
    min-width: 100% !important;
}

div[class*='code-block-pro'][class*='force-wrap']:not(.code-block-pro-editor) pre span.line span:empty:not(.cbp-line-highlighter)::before {
    content: ' ';
    visibility: hidden;
    opacity: 0;
    min-width: 100% !important;
    min-height: 100% !important;
}

Thanks for the snippet! I can point someone here in the future to try it out.