Added option to wrap lines in EuiCodeBlock

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `wrapLines` prop to `EuiCodeBlock` ([#3103](https://github.com/elastic/eui/pull/3103))
 - Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048))
 
 ## [`21.1.0`](https://github.com/elastic/eui/tree/v21.1.0)

src/components/code/_code_block.scss

@@ -3,6 +3,7 @@
   position: relative;
   background: $euiCodeBlockBackgroundColor;
   color: $euiCodeBlockColor;
+  white-space: nowrap;
 
   .euiCodeBlock__pre {
     @include euiScrollBar;

src/components/code/_code_block.tsx

@@ -55,6 +55,10 @@ interface Props {
   overflowHeight?: number;
   paddingSize: PaddingSize;
   transparentBackground: boolean;
+  /**
+   * specify how white-space inside the element is handled
+   */
+  whiteSpace?: 'nowrap' | 'normal' | 'pre';
 }
 
 interface State {
@@ -152,6 +156,7 @@ export class EuiCodeBlockImpl extends Component<Props, State> {
       paddingSize,
       transparentBackground,
       isCopyable,
+      whiteSpace,
       ...otherProps
     } = this.props;
 
@@ -175,6 +180,10 @@ export class EuiCodeBlockImpl extends Component<Props, State> {
       optionalStyles.maxHeight = overflowHeight;
     }
 
+    if (whiteSpace) {
+      optionalStyles.whiteSpace = whiteSpace;
+    }
+
     const codeSnippet = (
       <code
         ref={ref => {