css 当文本超出容器时将字体缩放到大小？

kcwpcxri 于 2023-01-27 发布在其他

关注(0)|答案(6)|浏览(462)

我希望字体大小为54px，如果文本适合在容器内，否则它应该是36px。
我在考虑是否可以用纯CSS解决方案来实现这一点，使用Scale函数来折叠到这两种中的任何一种。如果可以假设容器充满了，我猜我可以使用vw作为计算的基础？
但我在这方面实在是太执着了，有没有人可以给予我一点提示，告诉我怎样才可以做到这一点，或接近这一点。

css

来源：https://stackoverflow.com/questions/66046533/scale-font-to-size-when-text-exceeds-container

6条答案

按热度按时间

izj3ouym1#

试试这个

.thingy {
font-size:54px;
overflow-wrap: break-word;
}

<h1 class="thingy">Hel000000000000000000ooo</h1>

赞(0）回复(0）举报 2023-01-27

9w11ddsr2#

如果你想把一些文本放入一个容器中，并让它自己调整大小来填充那个容器，那么CSS技巧有一篇关于Fitting Text to a Container的文章，它将涵盖你的选择。
您还可以使用Viewport Sized Typography，它利用视口单位，例如：

1vw =视口宽度的1%
1vh =视口高度的1%
1vmin = 1vw或1vh，以较小者为准
1vmax = 1vw或1vh，以较大者为准

任何v*的一个单位是视见区轴的1%。其中"视见区"==浏览器窗口大小==窗口对象。如果视见区是50cm宽，1vw == 0.5cm。单独使用视口单位（如font-size: 4vw;）会使文本在改变窗口宽度时显得过大或过小，并带来可访问性问题（因为没有考虑用户偏好）。
最后，你可以使用clamp()来实现Simplified Fluid Typography。clamp有三个值，最小值，最大值，以及中间的一个灵活的单位，如果值在最小值和最大值之间，它将使用这个单位。
如果你希望字体大小最小为36px，最大为54px，你可以像这样使用clamp()，并根据你的喜好改变"灵活单位"。下面是一个容器中<h1>元素的流体排版示例。

body {
  font-size: 1rem;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container {
  border: .2rem solid #f06;
  padding: .5rem;
  height: 100%;
  width: auto;
}

.container h1 {
  font-size: 36px; /* fallback */
  font-size: clamp(36px, 10vw, 54px);
}

<body>
  <div class="container">
    <h1>Heading text</h1>
  </div>
</body>

浏览器对clamp()的支持非常好，但是您可能希望在它之前放置一个font-size声明，以设置一个可接受的回退值。
总之，如果您需要为所述容器设置显式width和height，您可能希望根据文本所在的内容框的大小使用媒体查询和视口单位calc()或clamp()。

赞(0）回复(0）举报 2023-01-27

nhhxz33t3#

我想没有js的话，几乎是不可能计算出来的。
下面是一个代码示例，我将如何在jquery中做它，或者你可以使用下面的jquery插件，但我从来没有测试过这个插件之前：FitText.js

for (let container of $('.text-container')){
    container = $(container);
    let textInner = $(container).find('.text-inner');

    console.log(container.width());
    console.log(textInner.width());

    if (container.width()<textInner.width()){
        textInner.addClass('fs-36');
        textInner.removeClass('fs-54');
    } else {
        textInner.addClass('fs-54');
        textInner.removeClass('fs-36');
    }
}

.text-container,
.text-container-before{
    position: relative;
    width: 250px;
    height: 60px;
    background: #333;
    color: #090;
    overflow: visible;
    margin: 20px 0;
}
.text-inner,
.text-before{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #0399;
    word-break: keep-all;
    white-space: nowrap;
}
.fs-54{
    font-size: 54px;
}
.fs-36{
    font-size: 36px;
}

/* just added because console window is hiding running code snipped */
.spacer{
    height: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>before</h1>
<div class="text-container-before">
    <div class="text-before fs-54">a bit longer text</div>
</div>

<div class="text-container-before">
    <div class="text-before fs-54">shorter text</div>
</div>

<h1>after</h1>
<div class="text-container">
    <div class="text-inner fs-54">a bit longer text</div>
</div>

<div class="text-container">
    <div class="text-inner fs-54">shorter text</div>
</div>

<div class="spacer"></div>

赞(0）回复(0）举报 2023-01-27

p4tfgftt4#

这个问题awsers并不完全是我要找的，所以这里有一个解决方案，如果文本超过父容器的大小，可以缩小文本，使其变小，直到适合容器。

for(const element of document.getElementsByClassName("shrink"))
{
        var size = parseInt(getComputedStyle(element).getPropertyValue('font-size'));
        const parent_width = parseInt(getComputedStyle(element.parentElement).getPropertyValue('width'))
        while(element.offsetWidth > parent_width)
        {
            element.style.fontSize = size + "px"
            size -= 1
        }
}

.container{
  border:1px dashed #ccc;
  display:flex;
  align-items:center;
  justify-content:center;
  width:200px;
  height:50px;
  margin:10px;
}
.shrink{
    white-space: nowrap;
    font-size:80px;
}

<div class="container"><span class="shrink">long text to shrink</span></div>
<div class="container"><span class="shrink">small text</span></div>

赞(0）回复(0）举报 2023-01-27

ar5n3qh55#

尝试word-break: break-all;，我认为这将解决您的问题

赞(0）回复(0）举报 2023-01-27

a0zr77ik6#

不，肯定CSS解决方案。但是，我的JS解决方案可以解决你的问题。
参考以下代码。class-54和class-36类将根据内容而更改：

// creating node
function createNode(element) {
  return document.createElement(element);
}

// creating append
function append(parent, el) {
  return parent.appendChild(el);
}

var getPageTitle = document.getElementById("pageTitle"),
  textLengthWidth = 0;
const getPageTitleText = getPageTitle.textContent;
getPageTitle.innerHTML = "";
for (let index = 0; index < getPageTitleText.length; index++) {
  const span = createNode("span");
  span.innerHTML = getPageTitleText.charAt(index);
  append(getPageTitle, span);
  if (index == getPageTitleText.length - 1) {
    calcFontSize();
  }
}

function calcFontSize() {
  var listOfSpan = document.querySelectorAll("#pageTitle span");
  listOfSpan.forEach(element => {
    textLengthWidth += element.offsetWidth;
  });
  console.log("total DIV width: " + getPageTitle.offsetWidth);
  console.log("total Content width: " + textLengthWidth);
  getPageTitle.offsetWidth < textLengthWidth ? getPageTitle.classList.add("class-36") : getPageTitle.classList.add("class-54");
}

* {
            padding: 0;
            margin: 0;
            font-size: 14px;
        }

        .title {
            display: block;
            width: 100vw;
        }

        h1, h1 span {
            font-size: 54px;
        }

        .class-54 span {
            font-size: 54px;
        }

        .class-36 span {
            font-size: 36px;
        }

<div class="title">
        <h1 id="pageTitle">Hello World! Hello World!</h1>
    </div>

赞(0）回复(0）举报 2023-01-27

我来回答

css 当文本超出容器时将字体缩放到大小？

6条答案

相关问题

热门标签

最新问答