程序员经验分享-hwhale

文本对齐文本 45 度 [重复]

2023-12-14

Screen

我想实现像上面屏幕上那样的文本对齐效果。 有什么建议么？


我相信您正在寻找shape-outside财产。

shape-outside CSS 属性使用形状值来定义浮动的浮动区域，并将导致内联内容环绕形状而不是浮动的边界框。

这允许诸如以下的值：

  • Circle()：用于制作圆形形状。
  • ellipse()：用于制作椭圆形。
  • inset()：用于制作矩形。
  • Polygon()：用于创建任何具有 3 个以上顶点的形状。
  • url()：标识应使用哪个图像来环绕文本。
  • 初始：浮动区域不受影响。
  • 继承：从父级继承形状外部值。

However, its 目前的支持 is 非常弱，只有真正的 chrome 支持它。

欲了解更多信息，请参阅here

小工作

Disclaimer This should only be used for demo only and I do not recommend this approach in a production environment

你也许可以使用 nth-childif你知道这个段落有多少行，但这假设你将使用设定的宽度/等：

div {
  background: tomato;
  width: 500px;
  display: inline-block;
  height: 300px;
}
div span {
  display: block;
}
div span:nth-child(1) {margin-left: 0px;}
div span:nth-child(2) {margin-left: 10px;}
div span:nth-child(3) {margin-left: 20px;}
div span:nth-child(4) {margin-left: 30px;}
div span:nth-child(5) {margin-left: 40px;}
div span:nth-child(6) {margin-left: 50px;}
div span:nth-child(7) {margin-left: 60px;}
div span:nth-child(8) {margin-left: 70px;}
div span:nth-child(9) {margin-left: 80px;}
div span:nth-child(10) {margin-left: 90px;}
<div>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

cssshapes

textalign

文本对齐文本 45 度 [重复] 的相关文章

  • 尝试将星号添加到必填输入字段

    我想我不太明白 before and after因为我无法让这个工作 我只是想在表单中的必填字段后添加一个星号 我的代码很简单

  • JavaScript 和 jQuery 以及句点的使用

    我很困惑在引用类名时何时使用类名之前的句点 在此示例中 为什么 active slide 类的第一次使用事先使用了句点 而其他两个则没有 var main function dropdown toggle click function dr

  • CSS 字体不起作用

    我正在尝试向我的网站添加自定义字体 我尝试了很多事情但没有成功 这是我的CSS代码 font face font family myFirstFont src url ellis ttf body margin 0 padding 0 wi

  • Codemirror光标位置偏移

    我正在使用代码镜像在网页中显示 突出显示和编辑 xml 但我遇到了光标位置偏离插入位置的问题 因此 如果从闪烁光标所在的位置删除字符 则删除之前的字符您期望的那个会被删除 我假设它与我当前页面存在 css 冲突 因为它在我的页面之外运行良好

  • 如何在 Quill（富文本编辑器）中检测和修剪前导/尾随空格？

    如何检测并删除前导 尾随空格Quill https quilljs com 哪个是富文本编辑器 例如 样本HTML下面代表Quill文本的输出 nHi 我们想要检测并删除由以下命令创建的每个文本块的前导和尾随空格Quill 不适用于整个文档

  • 带有透明边框的响应式箭头进度条

    我正在尝试构建一个进度条 如结帐中常见的那样 问题是 箭头之间的边界是透明的 整个事情应该是反应灵敏 到目前为止我已经明白了 http codepen io MrBamblele pen rVBeoz http codepen io MrB

  • 位置固定，无顶部和底部

    我发现了有趣的功能 但找不到它发生的原因 所以 我们有固定位置元素 它位于 body 下方 第一个元素有样式 firstEl width 100 height 200px background color green 第二个元素有 fixe

  • 带有边框半径的CSS中的完美圆不起作用

    圆往往是椭圆形的 我想要的是完美的圆 border radius 100 不起作用我想知道为什么 http jsfiddle net 8gD2m 1 http jsfiddle net 8gD2m 1 badge display inlin

  • 如何使h1标签以其实际宽度居中

    我需要使 h1 标签居中 还需要在其周围制作边框 为了防止占用更多宽度 我给出display inline block但标签没有响应text align center then h1 text align center border 1px

  • 使用 css3 列 - 如何获取元素位置？

    为了将长 html 文件与列分开 我使用了 css3 列 padding 0px height 1024px webkit column gap 0px webkit column width 768px 我想获取指定元素的位置 所以我使用

  • 如何让 Twitter Bootstraps 移动导航栏覆盖页面上的内容而不是将其向下推？

    我正在使用 Twitter Bootstrap 并且想修改移动导航栏 以便在展开时下拉菜单覆盖页面上的内容 而不是将其向下推 我知道我可能需要制作包含 div 绝对定位 增加它的 z index 并定位外部 div 相对而言 但我似乎无法让

  • 标题的固定高度和更改宽度（HTML 表格）

    我需要确保表格标题的高度是固定的 并且宽度是根据标题单元格内容进行调整的 标题文本最多显示两行 我们如何使用样式来做到这一点 另外 我想确保表行的宽度与标题行的宽度相同 即标题行决定宽度 注 目前 交易部门负责人别名 是按行排列的 它需要分

  • Bootstrap 4 行布局没有响应

    我正在使用 Bootstrap 4 在 MEAN 堆栈上为新闻文章布局创建一个 html 模板 但这应该不重要 对于这种总体布局的要求是 一篇 特色 文章位于其自己的列中 而其他 8 篇文章位于另一列中的两行中 当在较小的屏幕或移动设备上查

  • IE8/9 - CSS 文件的最大字节数

    我目前正在开发的应用程序有过多的 CSS 样式 我们似乎已经达到了 IE8 9 以及它可以加载的 CSS 数量的某种限制 在某些时候 它会停止解释 CSS 从而破坏某些页面上的样式 我们正在使用 Combres 来压缩 缩小导致 CSS 文

  • 下拉菜单导致滚动条

    我用过这个W3C 的示例 http www w3schools com bootstrap bootstrap dropdowns asp div class dropdown div

  • 输入元素可滚动并启用文本溢出省略号

    当我添加text overflow ellipsis对于输入元素 该元素是可滚动的 当我将光标放在元素上时 我可以左右滚动 就好像文本是全宽并且没有被截断一样 尽管后面没有文本 我该如何阻止这种行为 input width 180px te

  • 透明、无边框文本输入

    如何删除周围的边框

  • 使 div 的大小与其内部图像的大小相同

    我有一个带有以下代码的div HTML div img src img logo png div CSS div imgContainer width 250px height 250px padding 13px 问题是用户可以编辑图像大

  • 如何显示不同页眉的页面？ [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我正在为我的学校项目开发网站 但我遇到了一个问题 我在每个页面上显示一个标题 我的标题之一包含登录表单 另一标题包含用户名 搜索栏等 问题是

  • Chrome 上的 contenteditable 中未显示编辑光标

    当您打开此页面时 请参阅现场演示 http jsfiddle net gs3p1a6r 3 show 与 Chrome span span CSS myspan border 0 outline 0 JS myspan focus the

随机推荐

  • 为什么这个DateTimePicker脚本会导致IE6和IE7无法加载页面

    我在asp net MVC 3站点上有几个页面导致IE6和7在加载菜单后提示 无法加载页面 我已经能够通过以下方式解决此问题DateTimePicker script

  • 使用 NHibernate 更新 Top n

    我怎样才能让 NHibernate 产生这个 t sql 请求 更新前 n 个任务 设置修改 其中条件 我不想进行事务 批量更新 请检查一下 13 3 DML 风格的操作 引用的代码片段 ISession session sessionFa

  • 在 Windows Phone 应用程序中将动态 BitmapImage 转换为灰度 BitmapImage

    我想将位图图像转换为灰度位图图像 这是我从方法中获得的 因此 宽度和高度对我来说是未知的 我尝试过研究 WritableBitmapEx 和静态扩展方法等选项 但它们对我没有帮助 因为我希望返回数据类型为 BitmapImage 然后需要将

  • 如何更改 PostgreSQL 表并使列唯一？

    我在 PostgreSQL 中有一个表 其架构如下所示 CREATE TABLE foo table id serial NOT NULL PRIMARY KEY permalink varchar 200 NOT NULL text va

  • 定时自动注销和浏览器关闭

    我出于学习目的创建了一个非常简单的多用户游戏 当用户登录时 每个其他用户都会获得所有当前登录用户的更新 当用户登录时 它只是将该用户在 SQL 数据库中的值设置为 1 当用户注销时 该值应为 0 我正在使用 window unload fu

  • 快速读取并与Data.Table的Fread和Rbindlist合并

    我正在寻找一种使用 data table 的 fread 和 rbindlist 函数快速读取和合并一堆数据文件的方法 我认为如果 fread 可以将文件名向量作为参数 那么它可能是一个优雅的行 例如 mergeddata rbindlis

  • 如何计算逻辑向量中的 TRUE 值

    在 R 中 计算数量的最有效 惯用的方法是什么TRUE逻辑向量中的值 我可以想到两种方法 z lt sample c TRUE FALSE 1000 rep TRUE sum z 1 498 table z TRUE TRUE 498 你喜

  • Javascript 按名称获取子元素

    我正在传递一个 varel变成一个函数 el包含以前抓取的元素 使用 getElementById 并且当我 console logel在函数中我得到以下内容 当我尝试抓取内部的元素时 问题就出现了el using el getElemen

  • 串行端口 - 如何设置字符？

    考虑 Baud rate 19200 RTS on DTR on Data bits 8 Stop bits 1 Parity None Set chars Eof 0x00 Error 0x2A Break 0x2A Event 0x00

  • 如果使用 loadHTMLString 加载视图，如何在 uiwebview 中设置 http 标头

    我有一个UIWebView我正在加载使用loadHTMLString我需要在请求标头上设置cookie 我知道如何使用loadRequest但不加载网络视图loadHTMLString我没有请求对象 有人做过这样的事吗 从 loadRequ

  • 使用 open() 错误 22（Windows 路径）

    我无法让以下代码正常工作 path C Users jiversen Documents Jsons jsonName json with open path w as outfile json dump df outfile 我收到以下错

  • 类型错误：create_int()：函数参数不兼容

    我最近一直在使用 python 学习计算机视觉 在制作手部检测器项目时 我遇到了这个错误 Traceback most recent call last File c Users idhant OneDrive 007lakshya Idh

  • 比较两个数组并以 github 风格呈现交集/差异

    我有两个按字母顺序排序的数组 每个数组都包含唯一的值 但某些值将在两个数组之间共享 示例数组 src apple cherry grape lemon orange strawberry dst apple banana cherry or

  • Hadoop 中的reduce 任务什么时候开始？

    Hadoop中reduce任务什么时候开始 它们是否在映射器完成一定百分比 阈值 后开始 如果是这样 这个阈值是固定的吗 通常使用什么样的阈值 reduce阶段有3个步骤 shuffle sort reduce Shuffle 是减速器从每

  • windowActivated 和 windowFocusGained 之间的区别

    windowActivated 方法 从 WindowListener 实现 和 windowGainedFocus 从 WindowFocusListener 实现 方法之间的主要区别是什么 Java 文档说 窗口获得焦点 当 Windo

  • 我可以仅使用类型而不是具体变量来获取 Rust 数组的长度吗？

    我想将以下 C 代码重写为 Rust using storage array

  • 使用curl 下载 flurry 事件日志

    我开始使用Flurry Analytics 发现它的分析工具不足且速度太慢 3 个步骤的简单漏斗处理了 3 天 而通常在 100 000 行的表上使用 3 个左连接进行查询需要 0 001 秒 Flurry 允许在 事件日志 页面上下载 c

  • 对象引用作为字符串？

    在java中 你可以得到一个唯一的字符串对于一个对象 你怎么能在as3中做到这一点 您可以使用它来获取唯一的 uint 如果您愿意 请将其转换为字符串 P package import flash utils Dictionary publ

  • Checkstyle：自定义规则 - Eclipse 插件

    我使用 checkstyle API 编写了一些自定义 checkstyle 规则 它们使用 Maven 运行良好 在我将新项目添加为 checkstyle 插件的依赖项之后 现在我希望 Eclipse Checkstyle 插件使用这些规

  • 文本对齐文本 45 度 [重复]

    这个问题在这里已经有答案了 我想实现像上面屏幕上那样的文本对齐效果 有什么建议么 我相信您正在寻找shape outside财产 shape outside CSS 属性使用形状值来定义浮动的浮动区域 并将导致内联内容环绕形状而不是浮动的边

热门标签