相关疑难解决方法(0)

有没有办法将a的宽度缩放<input type="text">到实际值的宽度？

input {
  display: block;
  margin: 20px;
  width: auto;
}

<input type="text" value="I've had enough of these damn snakes, on this damn plane!" />

<input type="text" value="me too" />

是否可以使用css根据背景颜色更改文本颜色？

就像在这张图片中一样

当文本从一个div(白色空间:nowrap)越过时,是否可以使用css或jquery/javascript更改文本颜色？

谢谢

假设我有一个DIV:<div></div>我想知道JS的行高是多少.我知道可以检查样式属性style.lineHeight,但我想检查实际的 行高,没有它取决于CSS规则的存在.

假设字体系列和字体大小相同,两者都应输出相同的行高:

<div>One line of text</div>
<div>Two <br /> Lines of text</div>

如何使用JavaScript 获取元素的行高？

我有一个div它有inline-block一个max-width设置,以及一些可能包含在内部的文本内容.我的问题是div始终采用最大宽度,但只有文本包装.我希望div尽可能采取最小的宽度,以回应文本包装.

div {
 
  max-width: 120px;
  width: auto;
  display: inline-block;

  border: 1px solid black;    
  padding: 0.2rem;
  
}

<div>Reallylongword test</div>

实际结果:

期望的结果:

这也不能用于限制width父项.

我搜索过,我的代码正在使用这种方法.我也试过这个(小提琴),但它不起作用.我知道使用word-break: break-all,但这真的很难看.

谢谢.

更新

我正在尝试制作一个导航栏.它目前使用的是flexbox,而不是display: inline-block.我只是(或者至少我以为我做过)将问题隔离到单个nav元素.显然,并非所有答案都符合我原来的导航栏问题.对不起.如果我没有得到实际问题的答案,我会保留原帖.

我希望在我的所有表行中实现统一的外观.当你看下面我的例子时,你可以看到中间的音符超过了4行而且不那么漂亮.

我希望将所有内容限制<td>为3行.

如果要显示的内容多于三行,那么它应该剪切内容... [click for more]并将内容放在可折叠元素中,这样当单击它时它将显示整个内容.

后者应该不是问题,但如何将内容限制为仅三行？我应该算一下角色来做出决定吗？有更好的策略吗？我顺便使用Django,但我很乐意使用javascript,jquery或任何css魔法来解决这个问题.

更新:

接受的答案非常好.然而,它带有一个警告,这是不容易解决的.如果你的邻居td已超过三行,而当前的td只有两行,我们将得到一个无限的while循环.

while($(this).innerHeight() / $(this).css('line-height').slice(0,-2) >= 3){ .. }

由于$(this).innerHeight()相邻的单元格保持高度不能降低.我想如果有可能得到当前td的css并将其完全复制到一个单独的字段中,其中相邻的tds不会干扰,我们将获得最佳解决方案.

更新2:

正如阿萨德所提到的,解决方案是在内容周围放置一个div包装器td,并将类设置在div内部td而不是td自身上.它完美无瑕.

Apple的MobileMe使用javascript在用户输入时更改其主页上电子邮件登录中的字体大小,以便文本始终适合可用空间而不会溢出滚动.

虽然我可以看到如何在每个按键上执行一个函数,但我很好奇每次如何调整字体大小以便它总是适合输入字段.有没有办法用可变宽度字体来测量一段文本的长度？他们如何实现这种效果？

试试看我的意思:http: //www.me.com/

我想强调一个字一个圆形支架.这应该是C#Text的一部分,但如果它在CSS中更容易,没问题.我的问题是,Word的长度可能会有所不同,因此必须为每个单词计算弓.

我的第一个想法是使用CSS box-shadow:

CSS:

#test {
  font-size: 50px;
  background: transparent;
  border-radius: 70px;
  height: 65px;
  width: 90px;
  box-shadow: 0px 6px 0px -2px #00F;
  font-family: sans-serif;
}

HTML:

<div id="test">Hey</div>

不幸的是,由于动态文本大小,我无法计算它们.

这个问题有更聪明的方法吗？

我有一个表,在每个单元格中我想放置字符串,但它们比单元格宽度宽得多.为了防止换行,我想缩短字符串以适应单元格,并在末尾附加"..."以指示字符串更长.

该表有大约40行,必须对每个单元格进行,所以它很快就很重要.我应该使用JS/jQuery吗？

我该怎么办？

感谢您的时间.

亲切的问候,
马吕斯

一些（JS 修改的）HTML 可能如下所示：

<div style="width: 50px;">1,234,567</div>

如何检测文本节点是否比容器宽？

考虑这个例子：

CSS

.a1 {
      border-style: solid;
      border-width: 1px;
      font-size: 1em;
      line-height: 1.25em;
      height: 2.5em;
      max-height: 2.5em;
    }

.a1 {
      border-style: solid;
      border-width: 1px;
      font-size: 1em;
      line-height: 1.25em;
      height: 2.5em;
      max-height: 2.5em;
    }

目前，在 Firefox 43 中，调整页面宽度时的行为如下：

也就是说，文本尝试填充 div 的宽度（由页面宽度设置）。

我想做的是：

• 将高度固定为两个文本行（或者像我一样，如果行高为 1.25em，字体大小为 1em，则为 2.5em）；
• （假设文本是单行）-固定宽度，使文本适合两行文本，并且第一行的宽度与第二行的宽度大致相同

...也就是说，我希望 div 的格式如下：

...并且它会保持这样 - 具有固定的宽度/高度 - 在浏览器窗口缩放时。具体来说 - 我不想为 div 设置显式宽度，但 div 宽度应根据文本内容设置：

• 如果文本内容的宽度小于 200 px（即假设为单行），则 div 宽度为 200 px
• 如果文本内容的宽度大于 200 px，则假定为两行，因此文本会被分解，因此两行中的内容大致相同，然后取较长行的宽度

这是否可以用纯 CSS 来实现 - 如果不能，是否有人可以建议使用 JS（或 jQuery）+ CSS 的方法？