Question

overflow属性允许隐藏不适合边界框的内容，或者可以显示滚动条以通过较小的视图端口滚动内容。

但是也可以缩小子项的字体大小以防止溢出吗？

一般来说，缩小文本大小是没有选择的，但我使用字体大小为300％的Unicode pictographs。在这种情况下，将字体大小缩小到100％是可以接受的。

是否可以检测到溢出？

Answer 1

检查offsetHeight和offsetWidth以查看它们是否小于scrollHeight和scrollWidth：

<style>
div {
  width: 10px;
  height: 10px;
  overflow: hidden;
}
</style>
<script>
  window.onload = function() {
    var d = document.getElementsByTagName("div")[0]
    if (d.offsetHeight < d.scrollHeight ||
        d.offsetWidth < d.scrollWidth) {
      console.log("overflow");
    } else {
      console.log("no overflow");
    }
  }
</script>
<div>
some text
</div>

Answer 2

您无法确定css中的溢出。我可以想到两种方法来实现它。

如果您想要切换字体大小时知道屏幕尺寸或屏幕分辨率，则可以使用媒体查询，例如

div {
    @media screen and (max-width: 800px) {
        font-size: 30%;
    }
    @media screen and (min-width: 801px) {
        font-size: 20%;
    }
}

在第二种情况下，即如果您没有特定条件，那么我们需要使用javascript确定溢出。您可以使用
之类的内容检查溢出
```
if ($('overflowingDiv').width() > $('container').width()) {
    $('overflowingDiv').css('font-size', '20%');
}
```

Answer 3

是的，确实如此。我目前正在开发一个没有任何框架/库的Web应用程序，我必须满足类似的要求。在我的情况下，我不允许更改字体大小，但我必须缩短可能长的字符串，直到它适合。

我将很快解释我的解决方案，但现在还没有手头的代码。我相信您可以轻松地根据您的需求调整我的解决方案。

对我来说，能够衡量文字宽度的关键是将文本放入//Do all your includes. Don't forget we're using vectors and strings #include <iostream> #include <vector> #include <cstdlib> #include <string> using namespace std; unsigned userNum = 0; int main(){ //Step 1: Create a Vector vector<string>cellNum; for(int i= 0; i < 20;++i) { cellNum.push_back("x"); } { cin >> userNum; srand(userNum); for(int d = 0; d < 10; ++d) { for(int i = 0; i < 20; ++i) { if (rand() % 2 == 0) { cellNum.at(i) = " "; } else { cellNum.at(i) = "*"; } } vector<string>cellStor; for(int i= 0; i < 20;++i) { cellStor.push_back("x"); } for(int i = 0; i < 20; ++i) { int cellStatus = 0; int vecSize; if (cellNum.at(i) == "*") { cellStatus = cellStatus+1; } if ((cellNum.at((i - 1) + vecSize) % vecSize) == "*") { cellStatus = cellStatus+1; } if ((cellNum.at( (i + 1) % vecSize) == "*")) { cellStatus = cellStatus+1; } cout << cellStatus; } } } //Step 5: Make a new vector //Step 6: Walk through the old vector - at each point count the number of cells alive //Step 7: Based on the number of cells alive, set the new vector to be alive or dead //Step 8: Once cells are accounted for, set the old vector equal to the new one to do a full copy for(int j = 0; j<20; ++j) { cout << cellNum.at(j); } cout << endl; }。我不知道任何直接测量文本宽度的方法，但可以轻松测量跨度的宽度：

<span>

然后将该宽度与包含元素的宽度进行比较（我假设它只是父元素）：

/* Let 'spanid' be the id of the span containing the text */
width_of_text = document.getElementById("spanid").offsetWidth;

现在您拥有文本的宽度和包含元素的宽度，并且可以轻松地比较它们。

我在Firefox（最新的桌面版），Chrome（最新的桌面版）和IE11中测试了这个。我还没有在Edge中测试它，但我确信它也可以在那里工作。

此解决方案仅考虑水平溢出。我没有测试是否可以使用相同的方法检测到垂直溢出（但是在考虑了几秒之后：为什么不呢？）。

Answer 4

您可以使用document.getElementsByTagName或document.getElementsByClassName等，并检查元素是否滚动，检查属性scrollHeight。像这样：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test overflow</title>

    <style>
        p {
            width: 150px;
            height: 60px;
            overflow: auto;
            font-size: 300%;
        }
    </style>
</head>
<body>

    <p>
        Lorem ipsum dolor sit amet,
    </p>
    <p>
        Lorem
    </p>


    <script>
        let pr = document.getElementsByTagName('p');

        let i = 0;
        for( i; i < pr.length; i++ ){
            if( pr[i].scrollHeight - pr[i].clientHeight > 0 ) { // overflow
                pr[i].style.fontSize = '100%';
            }
            else {
                pr[i].style.fontSize = '300%';
            }
        }
    </script>
</body>

是否可以在溢出时缩小字体大小？

4 个答案: