段落中每个单词的第一个字母的样式

2024-01-12

我正在尝试使用样式设置段落的第一个字母CSS并想使用 greensock 添加一些动画,但实际上要求是设置每个单词的第一个字母的样式,而不仅仅是第一个字母段落。

对此有何建议/想法?

p{
  font-size:150%;
  color:#000000;
}
p::first-letter {
  font-size: 200%;
  color: #ff0000;
}
<p>Hello This Is The Title</p>

UPDATE我尝试处理以下方式(添加跨度标签并定位每个跨度的第一个元素),但它不起作用:

p span:nth-child(1)::first-letter {
   font-size: 200%;
   color: #ff0000;
}

与使用split(" ") https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split用于从字符串创建数组并forEach() https://www.w3schools.com/jsref/jsref_forEach.asp是迭代每个单词。然后剪切单词的第一个字母,然后附加span.并用span添加css效果

var str = $('p').text().split(" ");
$('p').empty();
str.forEach(function(a) {
  $('p').append('&nbsp;<span>' + a.slice(0, 1) + '</span>' + a.slice(1))
})
p {
  font-size: 150%;
  color: #000000;
}

span {
  font-size: 200%;
  color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello This Is The Title</p>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

段落中每个单词的第一个字母的样式 的相关文章

  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • HTML 中部分着色的阿拉伯语单词

    我不会说阿拉伯语 但我需要我们网站上对阿拉伯语的具体支持 我需要将部分阿拉伯语单词放在 span 与单词其他部分的风格不同 当我输入两个字符时 and 它们被组合成word 但是当我使用 HTML 标记时 span span 这些字母在输出
  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏?

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下
  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • 如何在react-native中获取Text组件的onPress值

    我是一名新的 React Native 开发人员 我想使用 onPress 获取 Text 组件的值并将其传递给函数
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • 现在 CSS3 供应商前缀有多必要? [复制]

    这个问题在这里已经有答案了 我只是想知道现在在 CSS 中指定 webkit moz ms 或 o 等供应商前缀在多大程度上仍然有必要 如果我理解正确的话 opera 切换到了 webkit 所以会删除 o 对吗 IE 在 IE10 中不再
  • 如何使用tampermonkey模拟react应用程序中的点击?

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 如何判断 jquery 对话框是否打开? [复制]

    这个问题在这里已经有答案了 寻找通用案例解决方案来确定当前是否打开任何 jquery 对话框 有多个 试过 ui dialog content dialog isOpen true ui dialog dialog isOpen true
  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在
  • 如何获取给定 DOM 元素的所有定义的 CSS 选择器?

    如何使用 jQuery 获取给定 DOM 元素的所有定义的 CSS 选择器 定义后 我的意思是在应用于任何样式表的所有 CSS 选择器document 在某种程度上 这类似于 FireBug 实现的功能 其中显示所选 DOM 元素的所有应用
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • Javascript 纪元时间(以天为单位)

    我需要以天为单位的纪元时间 迄今为止 我已经看到过有关如何翻译它的帖子 但几天后就没有了 我对纪元时间很不好 我怎么能得到这个 我需要以天为单位的纪元时间 我将解释为您想要自纪元以来的天数 纪元本身是第 0 天 或第 1 天的开始 无论您如
  • 长轮询会冻结浏览器并阻止其他 ajax 请求

    我正在尝试在我的中实现长轮询Spring MVC Web 应用程序 http static springsource org spring docs 2 0 x reference mvc html但在 4 5 个连续 AJAX 请求后它会
  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a
  • Schema.org 的常见问题解答页面

    我有一个常见问题解答页面 我想用更好的 html 架构来实现它
  • 在 ASP.NET Core MVC 中访问从视图到控制器的隐藏值

    我需要帮助使用 jQuery 从 ASP NET Core razor 视图页面传递隐藏控件值 jQuery 用于获取动态控件选定的值 section scripts
  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示

随机推荐

  • elixir 中嵌套列表和结构的 get_in

    我有一个结构 s a Bla b c 我要拿c从中获得价值 我正在尝试做 get in s a b 但它并不是为了从结构中获取价值而设计的 有没有类似的东西可以让我获取c从带有嵌套结构的列表中 As 有记录的 https hexdocs p
  • php 类的性能损失

    我正在为我的公司开发一个网络应用程序 该应用程序用于跟踪我们购买 和使用 的工具 公司中的员工每次使用工具时都会在应用程序 mysql db 中注册 到目前为止 我都是以过程风格编写代码 我仍然是 OOP 的新手 我的程序代码运行良好并且相
  • WPF 访问列表视图代码隐藏的滚动查看器

    我需要从代码隐藏访问列表视图的滚动查看器 这是我的列表视图的定义
  • Python mysql.connector.errors。 %s 已传递给带引号的 SQL 查询

    我在Python中执行以下代码 cursor execute SHOW DATABASES ans dblist cursor fetchall for db name in ans dblist cursor execute SHOW T
  • Scala 相当于 Haskell 的 do-notation(再次)

    我知道哈斯克尔的 do x lt 1 2 3 y lt 7 8 9 let z x y return z 在Scala中可以表示为 for x lt List 1 2 3 y lt List 7 8 9 z x y yield z 但是 尤
  • 具有 Charfield 计数和零值的 Django 模型

    我有一个 Django 数据库模型 它有一些属性 其中之一是带有选项的 Charfield 类别 我现在想用每个类别的行数来注释该模型的查询集 问题是 我知道这样做的方式 只有查询集中存在的类别才会被计数 但我想要一个查询集 其中所有类别都
  • 来自守护进程的错误响应:获取 https://registry-1.docker.io/v2/:拨打 tcp:查找registry-1.docker.io...i/o 超时

    我试图从 docker io 中提取图像 但收到此错误 最近我更改了 DNS 我不确定这就是原因 我执行了minikube ssh我执行了docker pull然后我得到了这个错误 Error response from daemon Ge
  • OpenLayers:如何计算两点之间的距离?

    如何使用墨卡托投影计算 OpenLayers 中两点之间的距离 Thanks use point1 distanceTo point2 var Geographic new OpenLayers Projection EPSG 4326 v
  • 将 INT 转换为 DATETIME (SQL)

    我正在尝试将日期转换为日期时间 但出现错误 我要转换的数据类型是 float null 我想将其转换为 DATETIME 该代码的第一行工作正常 但我在第二行收到此错误 将表达式转换为数据类型日期时间时出现算术溢出错误 CAST CAST
  • 是否可以在 Windows 上构建 ffmpeg x64?

    真正的答案可能是 不 但仍然需要仔细检查 有没有人能够在 Windows VS2013 或 VS2015 上构建 ffmpeg x64 我知道 如果不进行大量修改 公开可用的资源是不可能的 然而 如果有人做到了并且他愿意分享一些技巧 编辑
  • 使用 Flutter Firestore 插件,为文档中的每个子集合执行一些操作

    为了帮助我更好地了解 Flutter 和 Firebase 我正在制作一个列表共享应用程序 我正在处理列表主屏幕 该屏幕将显示可重新排序的列表图块视图 其中每个用户列表都有一个图块 我还没有开始研究这些列表内部的内容 我已经设置了 fire
  • 在 Ruby 中比较序列

    假设我必须 中小型 数组 tokens aaa ccc xxx bbb ccc yyy zzz template aaa bbb ccc 我怎样才能确定是否tokens包含所有条目template 按照同样的顺序 请注意 在上面的示例中 应
  • 无法多次重写 jQuery UI 自动完成 renderItem 方法

    它会在找到的第一个自动完成中正确覆盖 但对其余部分不执行任何操作 相反 它加载原始的 renderitem 方法 您可以在以下位置看到https github com jquery jquery ui blob master ui jque
  • 检查 Azure 资源组是否存在 - Azure Powershell

    我试图验证 ResourceGroup 是否存在 所以我认为以下代码应该返回 true 或 false 但它不输出任何内容 RSGtest Find AzureRmResource Format List ResourceGroupName
  • Rails 的 concat 方法和 do...end 块不起作用

    我刚刚读到 Rails 的concat清理在这里输出内容的助手的方法http thepugautomatic com 2013 06 helpers http thepugautomatic com 2013 06 helpers 我尝试了
  • 根据多个架构定义验证 XML 文件

    我正在尝试根据许多不同的模式验证 XML 文件 对人为的示例表示歉意 a xsd b xsd c xsd c xsd 特别是导入 b xsd 和 b xsd 导入 a xsd 使用
  • SQLiteDatabase close() 函数在多线程时导致 NullPointerException

    我在我的项目中发现 Android 上的 SQLiteDatabase 实现中的 close 函数在运行打开数据库 插入数据然后关闭数据库的多个线程时会引发 NullPointerException 一切都运行顺利 除非我允许每个线程在插入
  • 如何在 VBA (Excel 2010) 中将默认情况恢复为变量?

    在某些时候我不小心命名了一个变量range 全部小写 从那时起 Visual Basic for Applications 编辑器拒绝使用Range 帕斯卡大小写 它会自动将其更正为小写 我怎样才能重置它的 大脑 以忘记我过去的违规行为 注
  • ICS 文件内的超链接问题

    我创建了一个 ICS 文件 它有一个文本的超链接 在 Outlook 2013 中 它运行良好 但在其他电子邮件客户端中 它会向我显示完整的 URL 以及超链接文本 请参阅下面的屏幕截图 MAC OS 笔记本电脑 http img en25
  • 段落中每个单词的第一个字母的样式

    我正在尝试使用样式设置段落的第一个字母CSS并想使用 greensock 添加一些动画 但实际上要求是设置每个单词的第一个字母的样式 而不仅仅是第一个字母段落 对此有何建议 想法 p font size 150 color 000000 p