gpt4 book ai didi

javascript - 样式 div 使其为两行文本高,宽度基于文本内容适合两行?

转载 作者:可可西里 更新时间:2023-11-01 13:02:49 24 4
gpt4 key购买 nike

考虑这个例子:

CSS

.a1 {
border-style: solid;
border-width: 1px;
font-size: 1em;
line-height: 1.25em;
height: 2.5em;
max-height: 2.5em;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>

<body>
<h1>Hello World!</h1>

<div class="a1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad </div>

</body>
</html>

目前,在调整页面宽度大小时,它在 Firefox 43 中的行为如下:

ffox-scale.gif

也就是说,文本试图填充 div 的宽度(由页面宽度设置)。

我想做的是:

  • 将高度固定为两个文本行(或者像我一样,如果行高为 1.25 em,字体大小为 1em,则为 2.5em);
  • (假设文本是单行)- 固定宽度,所以文本适合两行文本,第一行的宽度与第二行的宽度大致相同

... 也就是说,我希望 div 的格式如下:

ffox-two-lines-ok

... 在浏览器窗口缩放时它会保持这样 - 具有固定的宽度/高度。特别是 - 我不想为 div 设置明确的宽度,但 div 宽度应根据文本内容设置:

  • 如果文本内容的宽度小于 200 像素(即假定为单行),则 div 宽度为 200 像素
  • 如果文本内容的宽度大于200px,则假定为两行,因此将文本打散,使两行的内容大致相同,然后取较长行的宽度

是否可以使用纯 CSS - 如果不能,是否有人可以建议使用 JS(或 jQuery)+ CSS 的方法?

最佳答案

好的,最简单的方法是固定 div 的宽度,您还可以添加 text-align: justify。你可以在这个 plunker 中看到它

text-align: justify;
text-justify: inter-word;
width: 30em;

虽然不值得。 text-align 和 text-justify 在这里没有用,我只是添加它们,以便您知道它们存在。

但是如果您想经历计算文本宽度并将 div 设置为该宽度的一半的困难路径。你可以找到很多帮助 here

关于javascript - 样式 div 使其为两行文本高,宽度基于文本内容适合两行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36915286/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com