如何让第一个字母像报纸风格一样推入段落

2024-04-30

我创建了一些 CSS 来处理段落中的第一个字母,看起来也更大,

如何使第一个字母向下并向左推,这样它就不会高于该行本身,并在需要时将其他行缩进到右侧? (见附图)

.text-article {
  color: #000;
}

.text-article:first-letter {
  font-weight: bold;
  font-size: 60px;
  font-size: 6rem;
  line-height: 10px;
  line-height: 1rem;
  text-transform: uppercase;
}
<div class="text-article">
We the People is a section of the whitehouse.gov website, launched September 22, 2011,[1] for petitioning the current administration's policy experts. Petitions that meet a certain threshold of signatures are most of the time reviewed by officials in the Administration and official responses are then issued, but not always, as outlined in the Criticism section.[1] Criminal justice proceedings in the United States are not subject to White House website petitions. In fact, no real processes of the federal government are subject to these White House website petitions; they are a public relations device for the present administration which permits citizens to express themselves. On August 23, 2012, the White House Director of Digital Strategy Macon Phillips released the source code for the platform.[2] The source code is available on GitHub, and lists both public domain status as a work of the U.S. federal government and licensing under the GPL v2.[3]
</div>

您可以使用float:left让第一个字母向下移动并将其他行推开。您还需要调整line-height为了让它更大一点——我用了40px/4rem.

.text-article {
    color: #000;
}
.text-article:first-letter {
    float:left;
    font-weight: bold;
    font-size: 60px;
    font-size: 6rem;
    line-height: 40px;
    line-height: 4rem;
    height:4rem;
    text-transform: uppercase;
}
<div class="text-article">
We the People is a section of the whitehouse.gov website, launched September 22, 2011,[1] for petitioning the current administration's policy experts. Petitions that meet a certain threshold of signatures are most of the time reviewed by officials in the Administration and official responses are then issued, but not always, as outlined in the Criticism section.[1] Criminal justice proceedings in the United States are not subject to White House website petitions. In fact, no real processes of the federal government are subject to these White House website petitions; they are a public relations device for the present administration which permits citizens to express themselves. On August 23, 2012, the White House Director of Digital Strategy Macon Phillips released the source code for the platform.[2] The source code is available on GitHub, and lists both public domain status as a work of the U.S. federal government and licensing under the GPL v2.[3]
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何让第一个字母像报纸风格一样推入段落 的相关文章

随机推荐

  • 如何从 WP_User 对象获取 WordPress 用户的名字?

    我正在写一个基本的插件 这是我的代码 new user get userdata user id user id is passed as a parameter first name1 new user gt user firstname
  • TextField“更改”事件仅在模糊时触发

    通常 Change 事件将在 TextField 失去焦点 模糊 后触发 但我需要它在字段值发生变化时立即触发 而不需要失去对该字段的关注 KeyListener 不会删除它 因为该值可能来自条形码扫描仪等 有什么办法可以做到这一点吗 提前
  • 更新到 Android SDK 工具 R22

    我也将 SDK 工具和 ADT 插件更新到了 R22 在更新之前一切都运行良好 但从那以后 我遇到了问题 基本上我有 2 个库项目和一个应用程序项目 我的一个库项目在 libs 文件夹中包含一些 jar 文件 这些 jar 之一在应用程序项
  • 路由器解析器不渲染组件

    我有这个路由器解析器来从 Google Firestore 检索数据 我正在尝试使用解析器来提前获取数据 当我将调试器放置在解析函数中时 它会显示从服务器检索的数据 但它永远不会从resolve 方法返回 谁能帮我一下 路由模块 const
  • 使用 javascript 复制到所有浏览器的剪贴板

    我试图让 复制到剪贴板 适用于所有浏览器 但运气不好 我正在使用 javascript 但我不想使用零剪贴板 http zeroclipboard org to do 请让我们知道我的代码有什么问题 感谢您的帮助 下面是代码 目前我的代码仅
  • jQuery 创建多维数组

    我花了很长时间试图弄清楚如何在 jQuery 中创建多维数组 我在循环之外实例化数组 在循环内部我想添加数组元素 i 0 loop start
  • 在 C 中释放 NULL 指针是一个好习惯吗? [复制]

    这个问题在这里已经有答案了 可能的重复 ptr 为 NULL 的 free ptr 是否会损坏内存 https stackoverflow com questions 1938735 does freeptr where ptr is nu
  • Libsourcey 缺少 -fPIC 编译错误

    我正在尝试运行 LibSourcey 以使用 Webrtc 流服务器 问题是我似乎无法让它发挥作用 我努力在我的 Ubuntu 16 04 上 cmake 该项目 cmake 文件中的正则表达式 但现在它已修复 我实际上遇到的问题是编译时的
  • 基本身份验证:是否可以像 getRemoteUser() 一样设置RemoteUser

    您好 我正在使用基本身份验证方法来保护我的 Web 应用程序中的某些页面 其中有指定的 url 模式如下
  • 起订量中的匹配设置问题

    我过去一周左右一直在使用 Moq 直到今天才遇到任何问题 我在获取时遇到问题VerifyAll 以正确匹配我的模拟的设置 我目前正在为我的应用程序的 API 编写单元测试 该应用程序的结构如下 API lt gt Service lt gt
  • android 中的 onSensorChanged 在模拟器中不断触发

    我正在使用 ACCELEROMETER 传感器 并已通过相同的方式注册了一个侦听器 mSensorManager SensorManager getSystemService Context SENSOR SERVICE mAccelera
  • gradle - 从 url 下载并解压文件

    从 url 下载和解压文件的正确 gradle 方法是什么 http 如果可能的话 我想防止每次运行任务时重新下载 在ant get可以通过以下方式实现skipexisting true 我当前的解决方案是 task foo ant get
  • Xcode 4.x - 使其指向有问题的崩溃行

    每次 Xcode 崩溃时 它都会指向 main m 上的这一行 int retVal UIApplicationMain argc argv nil AppController 我知道 Xcode 4 调试与 3 x 相比很糟糕 但是我如何
  • 带有 CompletableFuture 的 MDC 记录器

    我正在使用 MDC Logger 除了一种情况外 它对我来说非常适合 无论我们在代码中的何处使用 CompletableFuture 对于创建的线程 MDC 数据都不会传递到下一个线程 因此日志会失败 例如 在代码中我使用下面的代码片段来创
  • 使用适用于 IE7 和 IE8 的 jQuery 在 Facebox 中加载 FLV

    不用说 这在 Chrome Firefox 和 Safari 中完美运行 IE 任何版本 都是问题所在 客观的 我正在尝试加载 JWplayer 它会在 Facebox 弹出窗口中加载来自 S3 的 FLV jQuery document
  • 创建一个能够从容器注册表中提取的 Docker 就绪计算引擎

    我们使用 terraform 设置 GCE 实例 然后使用 ansible playbooks 来配置它们并将我们的服务转移到机器上 我正在我们的组织中运行一个项目 该项目需要从另一个项目中提取 Docker 映像 这些图像托管在另一个项目
  • 使用 Mercurial,我如何查看哪些更改尚未推送?

    我习惯了 git 你可以在其中运行 gitk 并得到如下内容 在这里您可以看到有一些更改需要推送到远程分支 或者 我可以使用git log decorate输出将是 b8c2926 refs heads next Update instru
  • FlexUnit ANT 任务挂起

    我正在使用 ANT 任务在构建服务器上运行 FlexUnit 当我从 Flash Builder 4 运行 Flex 单元测试时 它工作正常 但是当从 ANT 运行时 它会打开默认播放器 在我的例子中是 FireFox 成功运行 FU 但永
  • iPhone文本框显示光标

    我正在为 iPhone 开发一个计算器 设计类似于这样 问题是我无法在文本字段中显示光标 因为输入是通过图像等按钮进行管理的 此外 textField comeFirstResponder 不起作用 因为它显示默认键盘 所以我尝试 text
  • 如何让第一个字母像报纸风格一样推入段落

    我创建了一些 CSS 来处理段落中的第一个字母 看起来也更大 如何使第一个字母向下并向左推 这样它就不会高于该行本身 并在需要时将其他行缩进到右侧 见附图 text article color 000 text article first