相关疑难解决方法(0)

我对offsetWidth()和measureText进行了基准测试,得到了截然不同的值.它们不应该是一样的吗？他们为什么不同？

这是下面的jsfiddle和原始代码:http: //jsfiddle.net/WhGk7/2/

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<span id="visibilityHack" style="visibility: hidden; font: 15px Arial;">textAlign=start</span>
<div id="results"></div>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
var measureTextWidth = ctx.measureText("textAlign=start").width;
var measureTextNode =  document.createTextNode("measureTextWidth: " + measureTextWidth);
document.getElementById("results").appendChild(measureTextNode);

var swidth = document.getElementById("visibilityHack").offsetWidth;
var textnode = document.createTextNode("     offsetWidth: " + swidth);
document.getElementById("results").appendChild(textnode);


ctx.font="15px Arial";    

// Show the different textAlign values …

您是否知道一种良好的跨浏览器方式来了解文本行的宽度,以便您可以准确地将其打破以适应固定宽度？

假设您想要打破一个长文本,因为它不会溢出固定宽度的容器,但是您希望该行可能最接近边界,因此猜测插入s的位置并不是一个干净的解决方案.

我想调查一下,我想这可以通过一个不可见的div然后在其中打印线并使用Javascript检查div的宽度或类似的东西来完成.

有没有人做过这样的事情？

*(重点不是自动换行,这只是我现在想到的应用程序,但知道文本的宽度是我想要的)

使用表可以实现此行为,就像使用此代码一样:

<style>
table {
    table-layout:fixed;
    width:100%;
}
td {border:1px solid red;}
</style>
<table>
<tr>
    <td>Hello</td>
    <td>WWWWWWWWWWWWWWWWWWWWWW</td>
</tr>
</table>

输出将是我想要的:

|Hello               |WWWWWWWWWWWWWWWWWWWWWW|

但是如果它不适合屏幕宽度,这个解决方案不会将元素内部(在本例中为tds)包装到新行!所以我想用div和css做这个.如果我使用:

<style>
#eq > div {
    width: 400px;
    float: left;
}
</style>
<div id="eq">
    <div>Hello</div>
    <div>WWWWWWWWWWWWWWWWWWWWWW</div>
</div>

当然它的工作和输出相同,但当然#eq内的文本和元素数量是可变的!因此,如果文本"WWWWWWWWWWWWWWWWWWWWWW"将更改为"lol",则元素将是荒谬的宽.另一方面,如果我将其更改为更长的文本,则定义的宽度,所有其他更小元素的宽度将更小.所以最后一个问题是: 我如何使所有元素的宽度与最宽的元素一样宽,并且能够使用纯html和css进行包装而无需手动指定宽度？

基本上我需要跨度的宽度。需要使用在键盘上找不到的几个自定义字符我正在使用“div”构建自己的“输入”字段。每个字符都被包裹在一个带有事件监听器的“span”标签中。这将允许用户单击字符串中的任意位置并将光标移动到一个字符之后的位置，它还允许他们在字符串中间添加或删除字符。

我正在使用“offsetLeft”和“offsetWidth”来查找字符的右侧，问题是当单击字符/跨度时，“offsetWidth”偏离了。因此，例如，如果我使用 14 像素字体，“M”实际上是 11 像素时将返回 35 像素宽。并且有几种变体，像“S”这样的平均大小的字符在实际为 9 时将返回 26 个像素。因此大小存在变化。现在您可能想知道我是如何找到实际的字母大小的，而那是使用 Firebug 的。如果 Firebug 可以找到它，我会认为我也可以，我只是不知道如何。所以我希望这里有人知道。

我还尝试使用“getComputedStyle”和“currentStyle”来查找宽度并返回“auto”。还尝试过 getBoundingClientRect().width 它与 offsetWidth 相同，不同之处在于它还可以找到宽度中像素的分数，所以“M”是 35.366668701171875 像素宽，奇数。

编辑：

根据 user1289347 帖子，我应该注意到“offsetWidth”也会导致“offsetLeft”关闭错误的数量。

我有一个div包含S任意长度的文本(长度的字符串),但是固定的大小.超过一定长度(让我们称之为L),文本被截断,文本的其余部分不再可见.(从技术上讲,范围[0,L)是可见的,范围[L,S)不是).

我想要做的是L通过仅计算文本中可见的字符数来找到文本的长度div.超出截止点的任何字符都应该被忽略.

我很高兴使用jQuery等第三方库,如果能完成工作的话!

我在一个句子中单独显示每个字div使用inline-block带max-width的120px.当我尝试增加父div上的字体大小时,由于字体较大,div的内联块会重叠.

有没有办法以编程方式计算max-width增加字体大小后使用的div的内联块所需？

以下是示例代码段:

jQuery('.btnIncFont').click(function(){
  jQuery('.parentDiv').css('font-size',parseInt(jQuery('.parentDiv').css('font-size'))+2);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btnIncFont">+</button>
<div class="parentDiv">
  <div style="display:inline-block;max-width:120px">This is a test1</div>
  <div style="display:inline-block;max-width:120px">This is a test2</div>
  <div style="display:inline-block;max-width:120px">This is a test3</div>
  <div style="display:inline-block;max-width:120px">This is a test4</div>
</div>

按住+按钮,在某个阶段你会发现div相互重叠.我希望通过计算来解决这个问题,以便在增加font-size后max-width根据初始大小获得确切的比例120px.

我正在开发一个 React Native 应用程序，在其中我会在框中显示一些文本。有时，框中的单个单词太长而无法放在一行中，因此 RN 会在单词太长时将其断开并在下一行继续文本。不幸的是，这会导致单词的连字符不佳（请参见图像中的左框）。我正在尝试找到一种解决方案来改进这一点，以便在此示例中的结果就像右侧的框一样，其中单词在合理的位置被连字符连接。我知道有处理连字的 javascript 库。例如，这将单词分解为数组中的连字符。我被困在这里，因为我不知道如何真正弄清楚是否需要连字符这个词。有任何想法吗？

我有3个HTML文本框,每个文本框的初始宽度为30px.我想这样做,如果有人在其中一个文本框中输入文本以使其超出框的宽度,则所有三个文本框的宽度将扩展以匹配最大文本框的大小.做这个的最好方式是什么？

编辑：最初我只检查了桌面浏览器 - 但使用移动浏览器，情况更加复杂。

我遇到了一些浏览器及其文本渲染功能的奇怪问题，我不确定是否可以采取任何措施来避免这种情况。

Android 上的 WebKit 和（不太一致）Firefox 似乎正在使用 2D Canvas 库创建稍大的文本。我现在想忽略视觉外观，而是专注于文本测量，因为它们可以很容易地进行比较。

我使用了两种常用的方法来计算文本宽度：

• Canvas 2D API 和测量文本
• DOM方法

正如这个问题中所述：Calculate text width with JavaScript 但是，两者都会产生或多或少相同的结果（在所有浏览器中）。

function getTextWidth(text, font) {
    // if given, use cached canvas for better performance
    // else, create new canvas
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
};

function getTextWidthDOM(text, font) {
  var f = font || '12px arial',
      o = $('<span>' + …

如果我有

<div><input></input></div>

如何使自动input和包含的宽度div自动与当前显示的文本值一样宽.特别是,当用户编辑输入时,我希望盒子增长和缩小.

我能做的是纯CSS吗？我是否必须倾听事件并更新样式？怎么样？(注意:在这种情况下,字体是单倍间距的,所以可能使它更容易,尽管我对一般解决方案感兴趣).