我有一个文本，我希望在<br>给出的位置完全断开行。该文本应该在宽度小于文本宽度的视图中可滚动。如果我通过实验知道了文本的宽度，我可以将相应的文本div的width属性设置为该宽度，如下面的示例所示:
<!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>
这工作得很好，但我宁愿不硬编码的宽度300px，因为实际的文本是动态创建的，其宽度可能会有所不同。因此，问题是:是否有可能使文本div的宽度为"自然";宽度?
我想你不想在其他地方换行，而不是你定义它，那么你可以使用min-width: max-content;，所以没有必要硬编码宽度的确切值(这可能会有所不同，例如，如果用户想要放大你的文本)。
.text {
min-width: max-content;
font: 1rem/1.5 system-ui;
}<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.text上使用max-width: fit-content;。
max-widthCSS属性设置element的最大宽度。它可以防止width属性的使用值大于max-width指定的值。
旧white-space:nowrap的用例
div.container {
position: absolute;
width: 150px;
height: 110px;
border: 1px solid black;
left: 30px;
top: 20px;
overflow: scroll;
}
div.text {
background-color: yellow;
display: inline-block; /* to make sure the color cover all the element*/
white-space: nowrap;
}<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>不确定这是否正是你所追求的，但你可以使用calc()
div.text {
position: static;
background-color:yellow;
width:calc(100% * 2);
}