根据内容设置元素的宽度答案

【问题标题】：Set width of element based on content within根据内容设置元素的宽度
【发布时间】：2022-01-02 23:40:49
【问题描述】：

我为网格中的单元格创建了渐变线分隔符。我想根据标题的长度设置宽度。所以，对于附图，我希望这条线只到“电影制作”作品的结尾，而不是到容器的边缘。

网格的一个单元格：

<div class="h3">Title</div>
<div class="gradient-line"></div>
<p>Description</p>

.gradient-line {
    height: 7px;
    background-image: linear-gradient(to right, #007476, #007182, #006e8c, #1e6892, #3f6293, #615f92, #7b5d8c, #8f5b81, #a46376, #af716c, #b28168, #ae936c);
}

【问题讨论】：

标签： html css width zurb-foundation

【解决方案1】：

在单独的父 div 中包含标题和渐变线 div，从那里使用 fit-content 设置父 div 的宽度

HTML

<div class="fit">
  <div class="h3"> Title </div>
  <div class="gradient-line"></div>
</div>
<p>Description</p>

CSS

.fit { width: fit-content; }
.gradient-line {
     height: 7px;
     background-image: linear-gradient(to right, #007476, #007182, #006e8c, #1e6892, #3f6293, #615f92, #7b5d8c, #8f5b81, #a46376, #af716c, #b28168, #ae936c);
}

【讨论】：

这不起作用，因为 h3 的宽度仍然适合其父容器

【解决方案2】：

由于渐变纯粹是为了装饰，并不是实际内容的一部分，所以你可以把它作为背景图片放到 h3 元素中，然后删除包含它的 div。

显然，您需要根据需要在标题上设置填充。

.h3 {
  width: fit-content;
  padding-bottom: 10px;
  background-image: linear-gradient(to right, #007476, #007182, #006e8c, #1e6892, #3f6293, #615f92, #7b5d8c, #8f5b81, #a46376, #af716c, #b28168, #ae936c);
  background-position: left bottom;
  background-size: auto 7px;
  background-repeat: no-repeat no-repeat;
}

<div class="h3">Title</div>
<p>Description</p>

【讨论】：

谢谢！这适用于单行标题，但由于我将这些包含在网格中，因此每个元素都设置为页面宽度的 25%。具有较长标题的 h3 占用两行，因此它们的内容框填充整个容器宽度，而不仅仅是单词的长度。有没有办法让 h3 容器只适合单词占用的空间而不是更多空间？
好的，所以你需要'下划线'的宽度等于最长行中文本的宽度，而不是元素的宽度。我只是复制了你的 sn-p 这是一个简短的单行，没有考虑更大的问题，对不起。会思考的。
你有什么想法吗？
如果没有 Javascript，我看不到如何做到这一点。添加一些JS可以接受吗？