I have a text where I want the lines to be broken exactly at the position given with `<br>`. This text should be scrollable in a view port whose width is smaller than the width of the text. If I know the width of the text by experimenting, I can set the corresponding text div's `width` property to that width, as done in the following example:

```
<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>overflow css property</title>

  <style type="text/css">

    div.container {
      position: absolute;
      width: 150px;
      height: 110px;
      border: 1px solid black;
      left: 30px;
      top: 20px;
      overflow: scroll;
    }

    div.text {
      position: static;
      background-color:yellow;
      width:300px; /* I'd rather not hardcode this value */
    }

  </style>

</head>
<body>

  <div class='container' id='right'>
    <div class='text'>
    Lorem ipsum dolor sit amet, consectetur<br>
    adipiscing elit, sed do eiusmod tempor<br>
    incididunt ut labore et dolore magna aliqua.<br>
    Ut enim ad minim veniam, quis nostrud<br>
    exercitation ullamco laboris nisi ut aliquip<br>
    ex ea commodo consequat.<br>
    Duis aute irure dolor in reprehenderit in<br>
    voluptate velit esse cillum dolore eu fugiat<br>
    nulla pariatur. Excepteur sint occaecat<br>
    cupidatat non proident, sunt in culpa qui<br>
    officia deserunt mollit anim id est laborum.
    </div>
  </div>

</body>
</html>

```

This works fine, but I'd rather not hardcode the width to `300px` because the actual text is dynamically created and its width might vary. Thus the question: is it possible to make the text div's width to be the "natural" width?