当前位置: 首页 > 面试题库 >

在*字符*中指定宽度

公宜春
2023-03-14
问题内容

当使用 固定宽度的字体时 ,我想用 字符 指定HTML元素的宽度。

“ em”单位应该是M字符的宽度,因此我应该能够使用它来指定宽度。这是一个例子:

<html>
  <head>
    <style>
      div {
        font-family: Courier;
        width: 10em;
      }
    </style>
  </head>
  <body>
    <div>
      1 3 5 7 9 1 3 5 7 9 1
    </div>
  </body>
</html>

结果不是我想要的结果,因为浏览器行在第15列之后而不是10处中断:

1 3 5 7 9 1 3 5
7 9 1

(结果是Firefox和Chromium,都在Ubuntu中。)


问题答案:

1em是M的高度,而不是宽度。同样适用于ex,即x的高度。一般来说,这些是大写和小写字母的高度。

宽度是完全不同的问题。

将上面的示例更改为

<div>
    <span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>

您会注意到跨度的宽度和高度不同。在Chrome上,如果字体大小为20px,则跨度为12x22 px,其中20px是字体的高度,而2px是线高。

现在,由于em和ex在这里没有用,因此仅CSS解决方案的可能策略是

  1. 创建一个仅包含&nbsp;的元素
  2. 让它自动调整大小
  3. 将div放在和
  4. 使它的大小是周围元素的10倍。

但是,我没有设法对此进行编码。我也怀疑这是否真的可能。

但是,可以在Javascript中实现相同的逻辑。我在这里使用无处不在的jQuery:

<html>
  <head>
    <style>
      body { font-size: 20px; font-family: Monospace; }
    </style>
    <script 
      type="text/javascript" 
      src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
  </head>
  <body>
    <div>1 3 5 7 9 1 3 5 7 9 1</div>
    <script>
      $('body').append('<div id="testwidth"><span>&nbsp;</span></div>');
      var w = $('#testwidth span').width();
      $('#testwidth').remove();
      $('div').css('width', (w * 10 + 1) + 'px');       
    </script>
  </body>
</html>

(w * 10 +1)中的+1用于处理舍入问题。



 类似资料:
  • 问题内容: 显示空格时是否可以定义制表符宽度(例如在 就我而言,制表符宽度太宽,导致页面上的某些代码片段太宽。如果我能以某种方式缩短选项卡的宽度,使其适合没有滚动条的情况,那将使事情变得容易得多。(我想我可以用空格替换制表符,但理想情况下,我希望找到一种无需这样做的方法) 问题答案: 应该可以帮助您: 这是一个解决方案,它并不是整洁的,因为必须对选项卡的每个实例都进行此操作,但是它会使选项卡占用更

  • 问题 你有一些长字符串,想以指定的列宽将它们重新格式化。 解决方案 使用 textwrap 模块来格式化字符串的输出。比如,假如你有下列的长字符串: s = "Look into my eyes, look into my eyes, the eyes, the eyes, \ the eyes, not around the eyes, don't look around the eyes, \

  • 我想知道您是否可以在hasNext(字符串模式)中指定要扫描的内容。例如,我想检索正在扫描的行的前三个字符。那么有没有办法指定诸如 在这里我要抓取该行的前3个字母字符。

  • 本文向大家介绍Python 去除字符串中指定字符串,包括了Python 去除字符串中指定字符串的使用技巧和注意事项,需要的朋友参考一下 1、背景 最近的项目中,再次踩到Python字符串处理的坑,决定把此次解决方案记录一下,以勿踩坑。 2、遇到坑 原本字符串:大坪英利国际8号楼88-88号重庆汉乔科技有限公司大坪英利国际8号楼 去除最左边的字符串:大坪英利国际8号楼 预期结果:88-88号重庆汉乔

  • 必须使用可变宽度字体(因为它看起来很漂亮)。 必须以特定字符宽度换行文本(以匹配文本UI) 一个简单的连击实现,是吗?修改UI以提供我自己版本的包装视图(它继承自WrappedPlainView),并重写calculateBreakPosition()以提供我想要的包装行为。 只是看起来不那么简单。正在忽略由可变呈现宽度派生的问题...我发现calculateBreakPosition()没有被调

  • 宽字符 #include <stdio.h> #include <stdlib.h> #include <Windows.h> //01.宽窄字符的使用特点: // 1.宽窄字符变量的使用特点: // (1).只是存储数据的格子大小不一样,窄字符小,宽字符大 // (2).如果存储相同的数据,只要不发生数据越界,或者存储的数据即使越界 // 但是打印的时候