Add Border around text in ReactJs-CodePudding

So I am working on messenger like application with reactjs. I can't figure out how to surround each text message with a border (exactly like telegram/whatsapp ...). the main problem is that it should be proportioned to the text written. This is the styling that I stared with :

.messages{
    height:30px;
    width:100px;
    border:2px solid rgb(134, 133, 133);
    width:100px;
    margin-top:10px;
    margin-left:10px;
    background:white;

}

I would appreciate any help or references.

CodePudding user response：

you should use wrapper component on the text like a div and apply with to the wrapper component also for making it proportional with text width you should add width: fit-content to wrapper components and max-width; so your component will be something like this:

function App() {
  return (
    <div className="App">
      <div className="wrapper">
        <span className="message">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam
        </span>
      </div>
    </div>
  );
}

.wrapper {
  width: fit-content;
  max-width: 100px;
  height: fit-content;
  border: 2px solid rgb(134, 133, 133);
  margin-top: 10px;
  margin-left: 10px;
  background: white;
  text-align: left;
  /* max-height: 100px; */
}