html-拉伸文本以适合di的宽度

我有一个固定宽度的div,但是div内的文本可以更改。

是否可以使用CSS或其他方式设置字母之间的间距,以便文本始终完美填充div?

Curt asked 2020-06-27T19:35:55Z
11个解决方案
32 votes

正如Mark所说,<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="stretch one">Stretch me</p> <p class="stretch two">Stretch me</p> <p class="stretch three">Stretch <a href="#">link</a></p> <p class="stretch two">I am too slong, an I would look ugly if I was displayed on one line so let me expand to several lines and justify me.</p> <p class="stretch arial one">Stretch me</p> <p class="stretch arial three">Stretch me</p> <p class="stretch arial four">Stretch me</p> <p class="arial two">Don't stretch me</p>是最简单的解决方案。 但是,对于短文本而言,它没有任何作用。 以下jQuery代码将文本拉伸到容器的宽度。

它计算每个字符的空间,并相应设置<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="stretch one">Stretch me</p> <p class="stretch two">Stretch me</p> <p class="stretch three">Stretch <a href="#">link</a></p> <p class="stretch two">I am too slong, an I would look ugly if I was displayed on one line so let me expand to several lines and justify me.</p> <p class="stretch arial one">Stretch me</p> <p class="stretch arial three">Stretch me</p> <p class="stretch arial four">Stretch me</p> <p class="arial two">Don't stretch me</p>,以使文本延伸到容器的宽度。

如果文本太长而无法容纳在容器中,则可以使其扩展到下一行并将文本设置为<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="stretch one">Stretch me</p> <p class="stretch two">Stretch me</p> <p class="stretch three">Stretch <a href="#">link</a></p> <p class="stretch two">I am too slong, an I would look ugly if I was displayed on one line so let me expand to several lines and justify me.</p> <p class="stretch arial one">Stretch me</p> <p class="stretch arial three">Stretch me</p> <p class="stretch arial four">Stretch me</p> <p class="arial two">Don't stretch me</p>

这是一个演示:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="stretch one">Stretch me</p>
<p class="stretch two">Stretch me</p>
<p class="stretch three">Stretch <a href="#">link</a></p>
<p class="stretch two">I am too slong, an I would look ugly if I was displayed on one line so let me expand to several lines and justify me.</p>
<p  class="stretch arial one">Stretch me</p>
<p class="stretch arial three">Stretch me</p>
<p class="stretch arial four">Stretch me</p>
<p class="arial two">Don't stretch me</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="stretch one">Stretch me</p>
<p class="stretch two">Stretch me</p>
<p class="stretch three">Stretch <a href="#">link</a></p>
<p class="stretch two">I am too slong, an I would look ugly if I was displayed on one line so let me expand to several lines and justify me.</p>
<p  class="stretch arial one">Stretch me</p>
<p class="stretch arial three">Stretch me</p>
<p class="stretch arial four">Stretch me</p>
<p class="arial two">Don't stretch me</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="stretch one">Stretch me</p>
<p class="stretch two">Stretch me</p>
<p class="stretch three">Stretch <a href="#">link</a></p>
<p class="stretch two">I am too slong, an I would look ugly if I was displayed on one line so let me expand to several lines and justify me.</p>
<p  class="stretch arial one">Stretch me</p>
<p class="stretch arial three">Stretch me</p>
<p class="stretch arial four">Stretch me</p>
<p class="arial two">Don't stretch me</p>

JS小提琴演示

web-tiki answered 2020-06-27T19:38:26Z
26 votes

这可以通过span和一个小技巧来完成。 看这里:

span
span

诀窍是在伪装成很长单词的文本后添加一个元素。 假单词实际上是具有display:inline-blockwidth:100%span元素。

在我的示例中,假单词为红色,并且高度为1em,但是即使没有它,该hack也可以使用。

Aakil Fernandes answered 2020-06-27T19:40:00Z
8 votes

也许这可以帮助:

text-align:justify;
Mark answered 2020-06-27T19:40:20Z
6 votes

对于少于一行的文本,没有任何额外的js或标签,只有一个类,我发现了一种更好的解决方案。

<div class="stretch">你好么</div>
<div class="stretch">你好</div>
<div class="stretch">你好么</div>
<div class="stretch">你好</div>

wener answered 2020-06-27T19:41:44Z
5 votes

甚至更简单的HTML / CSS方法是使用flexbox。它也立即响应。 但是值得注意的是,如果您将SEO用作h1或其他东西,它不会将其拾起。

HTML:

<div class="wrapper">
<div>H</div>
<div>e</div>
<div>l</div>
<div>l</div>
<div>o</div>
<div>&nbsp</div>
<div>W</div>
<div>o</div>
<div>r</div>
<div>l</div>
<div>d</div>

CSS:

.wrapper{
  width: 100%;
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  border: 1px solid black;
}

jsfiddle这里

nathan answered 2020-06-27T19:42:17Z
3 votes

晚了一点,但是对于简单的纯CSS实现,请考虑使用span

span
span

不知道是否将每个字母都包裹在span中(注意任何元素都会起作用)是否会与SEO混淆,但我想搜索引擎会从innerHTML剥离用于重要标记(例如标题等)的标签的标签。(知道SEO的人会 确认?)

saricden answered 2020-06-27T19:43:46Z
2 votes

2018年3月如果您是在最近的时间里着手解决这个问题...

我试图用一个词就做OP所要求的,但在以下方面取得了成功:

1.使用$('span').css({'width','100%'});并设置CSS:span { letter-spacing: 0px; display:block} (这使得元素仅与内容一样宽)

2.在负载下捕获跨度的宽度$('span').css({'width','100%'});

3.捕获跨度的长度$('span').css({'width','100%'});

4.将跨度的宽度重置为容器$('span').css({'width','100%'});

5.捕获跨度的新宽度(或仅使用容器宽度)$('span').css({'letter-spacing':(cont-width)/length})

6.计算并设置字母间距以填充容器$('span').css({'letter-spacing':(cont-width)/length})

显然,可以将其转换为使用Vanilla js,即使对于大多数字体样式(包括非等宽字体),它也很有用。

KyleM answered 2020-06-27T19:44:41Z
2 votes

上面的一些答案很好用,但文本必须包含许多子div
而且还有很多额外的代码。
div中的文本应该整洁,因此我借助JS进行了整理。

<div class="words">This is the demo text</div>
<div class="words">This is the demo text</div>
<div class="words">This is the demo text</div>

ronaldtgi answered 2020-06-27T19:47:15Z
1 votes

我认为您真正要寻找的是扩展。

以某种看起来不错的分辨率渲染字体,然后使用JS通过CSS转换将其拉伸到容器中:

transform: scale(1.05);

这样做的好处是您的文本将始终很机智,但是您会遇到文本太小而无法阅读的问题。

快速说明是,您需要使要缩小/扩展的元素具有绝对位置:

position: absolute;
McTrafik answered 2020-06-27T19:47:48Z
0 votes

因此,如果您仍在研究此问题的边缘时,如果将延伸文本短线的韦纳答案与此建议结合使用以使用另一个线程中的真实元素,则可以完成整个操作而无需<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>伪类。

您将替换为一个实际元素,并将其放在您要证明的元素之后。 这将以相同的方式触发理由对齐:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

这个变体使您可以将这个技巧与React和style对象一起使用:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

这已经够丑陋了,但是您必须从那里挑选毒药,以哪种方式“固定”容器的多余高度:容器的固定高度或负边距? 相对定位和以下要素的重叠? 将容器背景与页面背景进行匹配,并假装像这样多余的边距是故意的?

worc answered 2020-06-27T19:50:31Z
-2 votes

jsfiddle链接

对于纯HTML / CSS解决方案,当您处理更短的文本(足够短以至于

text-align: justify;

将无法正常工作)

我以这篇出色的帖子为灵感,并将每个字母放在div中

HTML:

<div class="wrapper">
    <div class="letters">H</div>
    <div class="letters">e</div>
    <div class="letters">l</div>
    <div class="letters">l</div>
    <div class="letters">o</div>
    <div class="letters">&nbsp</div>
    <div class="letters">W</div>
    <div class="letters">o</div>
    <div class="letters">r</div>
    <div class="letters">l</div>
    <div class="letters">d</div>
    <span class="stretch"></span>
</div>

CSS:

.wrapper {
    width: 300px; /*for example*/
    border: 1px solid gray; /*only for demonstrative purposes*/
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.letters {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}
talker90 answered 2020-06-27T19:51:12Z
translate from https://stackoverflow.com:/questions/5976289/stretch-text-to-fit-width-of-div