css - 如何在 react Bootstrap 中的工具提示内放置换行符？

Question

我需要在 react bootstrap 工具提示中放置一个长段落，我需要在某些地方换行。我试过\n ,br,em 什么都没有给我换行。

export const TooltipMessages = {
 product:
   "Here we can see list of Product created and we can create a New product \r\n." +
   "We have 3 types of product Managed, Unmanaged and Source." +
   "Managed Product : Managed product is where by default all the environments are created 
    i.e Evaluation, Development," +
    "Test & Production." 
 }

和工具提示代码

<Tooltip id={`tooltip-top`} className="mytooltip">
      {ToolTipMessage.product}
</Tooltip>

Answer 1

你可以使用这样的东西:

react fiddle

NOTE: It was not allowing me to add only fiddle so added only css and html code, full functionality is available in fiddle.

.display-linebreak {
  white-space: pre-line;
}

<div id="app">


</div>