CSS 句子首字母大写

2024-03-04

我想将句子的第一个字母大写,如果可能的话,也将逗号后面的第一个字母大写。我想在这里添加代码:

.qcont {
    width: 550px;
    height: auto;
    float: right;
    overflow: hidden;
    position: relative;
}

您可以将第一个字母大写.qcont使用伪元素来获取元素:first-letter.

.qcont:first-letter{
  text-transform: capitalize
}

这是您仅使用 css 所能得到的最接近的结果。您可以使用 javascript(与 jQuery 结合)将句点(或逗号,如您希望的那样)后面的每个字母包装在span。您可以添加与上面相同的CSSspan。或者用 javascript 一起完成。

这是 css 方法的片段:

.qcont:first-letter {
  text-transform: capitalize
}
<p class="qcont">word, another word</p>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 句子首字母大写 的相关文章

  • 使用 htaccess 重写规则重定向后 CSS 未加载

    我有以下用户个人资料网址的简写 RewriteRule w profile php name of user 1 当我这样做时 该网站使用适当的 css 文件进行样式设置site com name of user 但当我这样做的时候却不是s
  • 具有相等宽度和高度 TD 的响应式表格

    如何创建每个单元格 TD 具有相同宽度和高度的响应式 HTML 表格 因此 当我调整浏览器窗口的大小或调整表格容器的大小时 表格将调整大小 但每个单元格将具有相同的高度和宽度 基金会不关心这个 当我用固定宽度和高度 以像素为单位 初始化 T
  • HTML5 安卓开发

    我对制作 Android 应用程序很感兴趣 而我的主要爱好是 Web 开发 现在让我困惑的是 人们用 HTML5 CSS3 JavaScript 语言制作应用程序 这些应用程序是在 Android 手机上的网络浏览器上运行还是像 Andro
  • 从 CSS 调用 javascript 函数

    我想知道是否有可能以任何方式 button width somePX height somePX button hover onmouseup func button 或类似的东西 我想这会有点酷吗 而不是为每个按钮编写 onmouseup
  • CSS 中“!important”的反义词是什么?

    我正在构建一个 jQuery 插件 它使用 CSS 样式向嵌套 DIV 标签添加颜色和边距 由于我宁愿将插件保留为单个文件 因此我的代码使用 jQuery 将这些颜色和边距作为 CSS 属性直接添加到 DIV 中 css 方法 这些属性的值
  • 如何使用溢出滚动设置 tbody 高度

    我在设置 tbody 高度宽度溢出滚动时遇到问题 h3 Table B h3 table style border 1px solid red width 300px display block thead tr td Name td td
  • 如何在严格模式下设置元素样式属性?

    Given body document getElementsByTagName body 0 iframe document createElement iframe iframe src protocol settings script
  • 图像在 IE8 中不显示

    在我的网站上 http appliedcodingtech com site factory automation photos http appliedcodingtech com site factory automation phot
  • 继承子节点的高度(A内的IMG)

    我的电脑上有一个漂亮的 CSS a 标签 放一个 img 链接内部使图像粘在链接外部 a 块 尽管它仍然可以点击 但看起来很愚蠢 改变 a to display block or float left修复了这个问题 但有一个不良的情况not
  • 如何在 CSS 中使用 3 位颜色代码而不是 6 位颜色代码?

    我最近检查了我的 CSS 文件 并将所有六位十六进制代码转换为简单的三位数代码 例如 我的 FDFEFF被缩短为 FFF 它呈现的颜色与以前几乎完全相同 在我看来 中间部分相当无用 删除它们在我的 CSS 文件中节省了整整 300 个字节
  • SVG 沿圆弧添加文本

    我正在尝试绘制 SVG 径向饼图 如下所述 色卡 https stackoverflow com a 18210763 1395178 现在我尝试将文本与圆弧一起添加到每个切片 我试图展示Text 1具有与 M 和 A 值完全相同的 x y
  • CSS 动画在 Internet Explorer 10 和 11 中不起作用

    以下 css 动画在 Chrome Mozilla Opera 浏览器中完美运行 但在 Internet Exporer 10 和 11 中不起作用 出了什么问题 请参见http jsfiddle net bm72w3n3 http jsf
  • CSS 中的 &::before、&::after 是什么? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想创建一个垂直时间线 然后我发现了这个页面 http cssdeck com labs oz2nu681 http cssdeck
  • CSS过渡div晃动

    为什么当我使用位置绝对和百分比宽度时 当我将鼠标悬停在上面的 div 上时会出现此故障 有例子 我在更复杂的网站上遇到了这个故障 div class box text div div class container div box widt
  • Safari 6 (iOS 6) 弹性布局不会换行元素

    我需要将两个框放在列中 这在我测试过的其他浏览器中有效 但在 iOS 6 上的 Safari 6 中无效 例子 http jsfiddle net 5FESj 1 http jsfiddle net 5FESj 1 display webk
  • HTML 文件上传“未选择文件”文本样式

    我正在构建一个需要文件上传的 html 表单 当我让文件上传部分正常工作时 我无法获得表单上传按钮和 未选择文件 文本的样式 我想要的标记是 有办法做到吗 PS 请忽略绿色文本 上传屏幕截图 我有那个工作 当前行为按钮和 未选择文件 位于同
  • 用于选择 querySelector 中当前元素的 CSS 伪选择器可用于同级 (+) 或一般同级 (~) 选择器? [复制]

    这个问题在这里已经有答案了 如果我有这个 HTML div class elem div class child div div div class sibling div 和JS let elem document querySelect
  • jQuery 面板滑块通过单击按钮打开但不会关闭

    我的页面上有一个按钮 可以使用 jquery 和 Modernizr 框架打开右侧面板 按钮位于屏幕最右侧 单击时 它会向左滑动并打开打开的面板 问题是 再次单击时它不会滑回到原来的位置 HTML div class cd panel fr
  • 如何将外部 div 的高度设置为始终等于特定内部 div 的高度?

    我有一个外部 div 其中包含三个内部 div 我希望最左边的内部 div 始终确定外部 div 的高度 如果其他内部 div 的内容 比最左边的 div 少 它们将有空白空间 如果他们有更多的内容 比最左边的div 他们将得到一个滚动条
  • Ie11 不应用媒体查询样式

    IE11 忽略我的媒体查询并始终使用移动 CSS 奇怪的是 如果我改变浏览器宽度 即使只是 1 2 像素 浏览器也会自行渲染并显示媒体查询 我尝试了 css lint 我的 css 中没有错误 我的CSS没有什么特别的 只是简单的 css

随机推荐