【问题标题】:How to add different style to numbers on html? [closed]如何为html上的数字添加不同的样式? [关闭]
【发布时间】:2014-08-01 17:22:23
【问题描述】:

是否可以为页面中的数字设置样式? 我想在整个页面中更改我的数字的字体大小和系列,例如用户插入了一些包含文本和数字的文本。我想为数字添加一些样式。 (正文有 X 表示字体系列,我希望我的数字有 Y 作为他们的字体系列)

  • 我在服务器端(Symfony 框架)使用 php 和 ORM。

有什么解决办法吗?特别是css。

【问题讨论】:

  • 请在您的问题中包含您的代码。让我们知道您尝试了什么以及出了什么问题。
  • 数字在其他方面只是一种文本。所以你可以给它们添加样式

标签: php html css symfony


【解决方案1】:

这里有一个可以帮助您的解决方案。每次你想在你的 html 页面中放一个数字时,你用<span class="numbers"></span> 包装它,然后在这样的 css 文件中添加你的样式

.numbers
{
    color : red;
    /* your code */
}

如果您使用 php 并从数据库中检索数据,则必须在显示它们之前包装所有数字。解决方案是创建一个函数,您应该将其应用于从数据库中获得的每一列。功能是:

function wrap_numbers($str)
{
    preg_match_all('!\d+!', $str, $matches);
    foreach ($matches[0] as $key => $value)
        $str = preg_replace('/ '  . $value . '/',  "<span class='numbers'>" . $value . "</span>", $str, 1);
    return $str;
}

现在假设您的数据库中有一个具有此值的列:

$str = "This is a number 123 this is another one 456";

在打印$str之前,你必须像这样应用函数

$str = wrap_numbers($str);

如果你打印你的 $str,你会得到不同风格的数字,如果你想知道 $str 里面到底是什么,你可以这样做

var_dump($str);

结果是:

string 'This is a number<span class='numbers'>123</span> this is another one<span class='numbers'>456</span>'

【讨论】:

  • 当我插入号码时它会很有用,但是来自数据库的号码的解决方案是什么?例如,其中包含一些数字的文本。
  • 您所要做的就是创建一个函数来查找字符串中的所有数字(来自数据库),然后在打印字符串之前将它们包装在 &lt;span class='number'&gt;&lt;/span&gt;
  • 您使用的服务器端语言是什么? php?
  • @parisssss 我更新了我的答案,并添加了帮助您用 包装数字的功能
  • 感谢您的解决方案 :)
【解决方案2】:

您可以使用具有特殊 CSS 设置的类将您的数字包装在 span 标记中。例如

html:

some text <span class='prettyNumber'>123</span> other text

css:

.prettyNumber{
    font-size: 2em; /** or anything you want **/
}

数字只是一种文本,您可以像为任何其他字符串设置样式一样设置它们的样式 - 将它们包装在一个元素中并为其添加样式。如果您想在后期处理中为它们添加样式,例如通过从页面解析它们,那么请不要这样做,这肯定不是一个好方法。

结果包装更新:

从数据库中检索字符串并将其存储在假设为$result 之后,您可以执行以下操作将数字包装在其中:

$result = 'some 123 example string';
$numberRegex = '/(\d+)/i';
$replacement = "<span class='prettyNumber'>${1}</span>";
preg_replace($numberRegex, $replacement, $result);

这应该将$result 的值更改为some &lt;span class='prettyNumber'&gt;123&lt;/span&gt; example string。虽然我还没有测试过,但我想你还是明白了;)

【讨论】:

  • 谢谢。当我插入数字时它会很有用,但是来自数据库的数字的解决方案是什么?例如,其中包含一些数字的文本。
  • 您可以在从数据库中检索文本后立即处理文本,并使用正则表达式替换包含在跨度中的相同数字的数字..
  • 但这显然不是纯 CSS
  • 您使用什么语言与数据库通信?
  • 我用的是ORM,db语言没有区别。
猜你喜欢
  • 2012-03-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-24
  • 2021-12-16
  • 2013-04-21
  • 1970-01-01
  • 2020-02-20
相关资源
最近更新 更多