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

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(使用前将#替换为@)

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

  • 如何为 HTML 元素创建鼠标拖动滑块?

    我发现的许多滑块插件要么仅单击以查看下一个图像 要么如果它们确实具有鼠标拖动或触摸拖动功能 则仅允许图像 有谁知道为任何 html 元素编写鼠标拖动滑块的插件或可能的方法 我专门使用 SVG 但将来如果能在 div 元素之间滑动就更好了 H
  • 引导导航栏菜单与文本重叠

    我使用最新版本的引导程序 当我调整屏幕浏览器的大小时 使用小切换按钮下拉导航栏时 导航栏会重叠页面上的文本 而不是向下推页面内容 我已经多次研究过这个问题 我尝试将 padding bottom 放在导航栏上 将 padding top 放
  • 如何在 select2 下拉列表中换行?

    我正在使用 select 2 下拉菜单 然后在其内容中显示一些长句子 我想在句子的正确位置添加换行符 但下拉菜单是自动调整的 For example the content of the dropdown right now looks l
  • Masonry - imagesLoaded - 不是函数

    Masonry and imagesLoaded应加载并正常工作 已经制作了一个类似的网站 并且可以正常运行 我不知道我的问题出在哪里 所以我希望你能看到问题所在 应该是少了点什么 在 Chrome Inspect 中 我收到以下错误 Un
  • 我如何能够以两行显示标题,并且每行的字体大小不同?

    我正在使用 Google Chart API 创建时间线图 并希望将图的标题修改为两行 问题 我如何能够显示具有不同字体大小的两线图表标题 电流输出 理想输出 相关研究 我唯一能找到的是有人试图用饼图来做到这一点 但我尝试了但无法使其发挥作
  • socket.io 的良好初学者教程? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 响应式图像 - srcset 和尺寸属性 - 如何正确使用两者:基于设备像素比和基于视口的选择一起?

    到目前为止 我经常读到这个问题 并且它也发生在我自己的项目中 这里介绍一下我到目前为止所发现的关于 srcset 和 size 属性的内容 关于如何使用有两种不同的可能性srcset 属性 来源 w3c http w3c github io
  • 删除子元素上的 CSS 过滤器

    我的 CSS 代码有问题 正如您所看到的 我在 li 元素上有过滤器 但它覆盖了其他元素 我需要使其他两个元素没有过滤器 有没有可能这样做 main width 300px height 300px background color blu
  • Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了
  • 为什么 IE8 在我的图像锚标记上添加底部边框?

    我知道 这很可悲 但今天早上 IT 刚刚在我的机器上安装了 IE8 我立刻遇到了一个明显的问题 尽管我知道答案就在我面前 但我已经把它搞砸了太久了 首先 这是网站 www mchenry edu http www mchenry edu 在
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理

随机推荐

  • 如何从 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