Question

我正在尝试获取<div>元素，例如：

调整宽度直到达到一定宽度。
在达到其宽度后，应显示滚动条以显示其他内容。

如果可能，这应该由css单独完成。

示例

div包含文本foo和3个字母符合div的最大宽度大小：

/-----\
| foo |
\-----/

div包含文本foobar，并且6个字母符合div的最大宽度大小 - 因此它会调整大小：

/--------\
| foobar |
\--------/

div包含文本foobarfoobarfoobar，但18个字母不适合div的最大宽度 - 因此它调整到最大宽度并显示滚动条：

/-------------\
| foobarfooba |
+-------------+
| {Scrollbar} |
\-------------/

到目前为止我尝试了什么：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    border: 1px solid;  /* to show div size */
    overflow: auto;     /* to add scrollbars for overlong texts */
    width: 0px;         /* default width */
    max-width: 250px;   /* maximal width */
}
</style>
</head>
<body>

    <!-- works, scrollbar will be shown -->
    <div>asdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjkl</div>
    <!-- width is wider than it has to be (at least in Firefox) -->
    <div>asdfghjklasdfghjkl</div>

</body>
</html>

但这不起作用，因为width属性被max-width属性覆盖（请参阅：http://www.w3schools.com/cssref/pr_dim_max-width.asp）。那怎样才能实现这样的目标呢？

Answer 1

您可以将其显示类型更改为width或将<div>更改为一侧，而不是指定inline-block - float元素，以便它们缩小为适合他们的内容。

例如：

＆＃13;

div {
  border: 1px solid;  /* to show div size */
  overflow: auto;     /* to add scrollbars for overlong texts */
  /* width: 0px; */   /* default width */
  max-width: 250px;   /* maximal width */

  float: left; clear: left; /* or try display: inline-block instead */
  white-space: nowrap;      /* optional */
}

＆＃13;

<div>asdfghjklasdfghjklasdfghjklasdfghjklasdfghjklasdfghjkl</div>
<div>asdfghjklasdfghjkl</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic sint excepturi adipisci officia eius dolore numquam? Error, non, aliquid. Laudantium ipsa est, corporis alias nesciunt, molestias aspernatur doloribus saepe dolorem!</div>

＆＃13;

Answer 2

quant，我想知道如何使用函数来计算自定义div中的字符串长度，然后返回计算出的宽度，以动态地重新分配回自定义div宽度属性。

使HTML div调整大小和可滚动

2 个答案: