使用CSS的圆形文本段落[重复]

2024-03-28

我一直在寻找一个关于如何将一段文本放置在圆圈内的体面且快速的解决方案。我发现有两种解决方案。

解决方案1

浮动倍数div与文本左侧和右侧的文本高度相同,并通过更改 divwidth您可以调整文本的剩余空间。

解决方案2

使用生成器来做同样的事情,http://www.csstextwrap.com/index.php http://www.csstextwrap.com/index.php.

奖金(不是问题的一部分,只是一个提示)

我不是在寻找这个,但也许有人可能需要它,我认为将它作为链接很好 >http://csswarp.eleqtriq.com/ http://csswarp.eleqtriq.com/它是一个基于网络的生成器,可以帮助您将文本环绕在圆圈上。

问题?

是否有更简单的解决方案可以将文本段落放入圆圈内,而无需添加浮动 div 和其他标记。拍打包含该文本的图像并不是解决方案。最好的情况是,该解决方案将具有干净的 HTML 标记,并且在 CSS 中进行一些调整。


Eric Meyer 的书“Eric Meyer on CSS”讨论了这一点(项目 10)以及您发现的使用相同原理的文本换行解决方案。

使用一个简单的border-radius: 50%不影响内容框的形状,此时内容框是矩形。例如,请参阅demo http://jsfiddle.net/Kyle_Sevenoaks/Q9k6v作者:凯尔·七橡树。

有一个正在开发的 CSS3 模块可以解决这个问题:

http://dev.w3.org/csswg/css-shapes http://dev.w3.org/csswg/css-shapes

然而,该规范仍处于草案模式,目前不受支持,可能需要一两年的时间。

简短的回答是否定的,但希望评论能提供一些见解。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用CSS的圆形文本段落[重复] 的相关文章

  • 删除并添加回元素后,JQuery 单击功能不起作用

    这是我的点击功能 cal table tbody td on click function if this hasClass available alert asd 我遇到的问题是 在切换到下个月或上个月后 我在日历上的点击功能不起作用 例
  • 绝对定位的最小高度

    我的页面 topLeft 上有一个区域设置了最小高度 在 topLeft 中 我有一个 heroBanners 部分 我希望将其锚定到 topLeft 的底部 使用position absolute 底部 0 起初 这工作正常 但是当 to
  • 复选框和标签之间的填充

    对于 CSS 专家来说 此标记输出一个带有标签的复选框Value1在它的右边 但是Value1距离复选框太近 dd dd
  • 不间断破折号 html [重复]

    这个问题在这里已经有答案了 我知道有一个不间断的空白 nbsp 是否有不间断的破折号 我可以使用这样我的单词就不会在该位置换行 中断 另外 有人可以向我指出一个列表 其中包含在断开句子时优先考虑的字符 例如空格 提前致谢 Use 8209
  • Firefox 中忽略的图像最大高度百分比

    HTML div class container div
  • 使用VBA抓取实时数据

    我想从中抓取实时数据https iboard ssi com vn bang gia hose https iboard ssi com vn bang gia hose使用VBA 我的代码如下 但它不会返回其中包含数据的 html 文件
  • 为什么页面锚点在 Ruby On Rails 中不起作用?

    因此 我的链接具有用于加载 ajax 的 href 值和用于链接到页面顶部的 onclick 值 当我单击链接时 ajax 内容都会加载 并且 url 会显示对锚点的引用 但页面不会移动到锚点 我已经尝试过锚点show html erb a
  • 如何让 div 调整其高度以适应容器?

    如何让导航 div 向下展开或使其高度与其父 div 相同 border 0 padding 0 margin 0 container margin left auto margin right auto border 1px solid
  • jQuery 创建并追加多个元素

    我创建了 2 个 div Div1 冻结 Div2 父级 然后又创建了 3 个 div 加载 标题 消息 将其附加到 Div2 父级 整个 div 进入 body 标签 下面是我的代码 我认为还有其他一些最好的方法来实现这一点 var fr
  • 添加“通过电子邮件分享”链接到网站

    我有一个在 Dreamweaver CS4 中构建的 HMTL CSS 网站 我想添加一个指向该网站的 通过电子邮件共享 链接 这样任何点击它的人都可以轻松地将指向该网站的链接发送给他们选择的收件人 我想要其中一个信封图标 但最好可以自定义
  • 使用详细信息和摘要标签作为可折叠内联元素

    我正在努力研究这个问题的解决方案 找到一种方法来实现可折叠按钮 或其他类似对象 这样 它们可以在同一行中使用 单击时 其内容显示在按钮所在行和下一行之间 他们反应敏捷 内容的样式独立于标题 我制作这个 gif 是为了更好地了解我想要获得什么
  • 如何在流体宽度容器中将左侧、中间和右侧的三个按钮放置在同一行?

    我在用着LESS在 Twitter Bootstrap 环境中 但我会直接接受CSS也有答案 Fluid width container Btn1 Btn2 Btn3 另一种宽度 Fluid width container Btn1
  • CSS中的继承是什么意思? [复制]

    这个问题在这里已经有答案了 我经常使用background inherit 像这样 许多其他 CSS 属性接受继承作为值 但有什么作用inherit意思是 它是如何工作的 inherit只是意味着样式将从元素的父元素继承 例如 jsFidd
  • 使用 CSS 实现等高元素

    我读到了几种不同的解决方案来模拟等高的列或元素 但没有一个真正引起我的注意 因为它们使用了 hack 极其复杂的 HTML 布局或未得到广泛支持的属性 这是例子Fiddle http jsfiddle net weppos satgw 我的
  • 如何选中/取消选中单个单选按钮

    ssn byphone click function var ssn role document getElementById ssn byphone checked if ssn role true ssn div hide ssn by
  • 样式的顺序重要吗?

    下面是我的标记 当我将鼠标移到超链接上时 它们会带有下划线并变成红色 但如果我交换最后两条规则的顺序 超链接仍然会带有下划线 但它们的颜色会变为黑色而不是红色 这是设计使然吗 如果是这样 规则是如何应用的 谢谢 康斯坦丁
  • 如何在 Angular 2 中动态更改 :host 中的 CSS?

    如何动态更改组件宿主的 CSS 属性 我有一个组件 在它的 CSS 中我给了它一个样式 host overflow x hidden 在子组件中单击按钮时 我需要添加overflow y hidden到主机组件 我如何实现这种行为 这是一个
  • CSS 中的边框图像 svg(颜色)样式?

    是否可以从CSS样式填充自定义边框图像 我应该使用哪个属性 E g border image source url assets images dots new svg border color red doesn t work fill
  • 如何通过 JavaScript 函数在 HTML5 画布上绘制多边形

    我希望用户能够单击画布上的某个位置 多边形就会出现在上面 div class rounded div
  • 使用 Excel 从 Lotus Notes 发送电子邮件并具有附件和 HTML 正文

    是的 我正在尝试通过 Lotus Notes 发送 Excel 电子表格的电子邮件 它有一个附件 并且正文需要采用 HTML 格式 从我读过的所有代码来看 我有一些代码应该允许我这样做 但事实并非如此 如果没有 HTML 正文 附件将发送

随机推荐

  • 检查类是否存在于文件中而不需要/包含

    有没有一种方法可以检查文件中是否存在类而不包含 需要该类 就像是 class in file file 正如我已经提到的 我知道这可以通过要求 包括课程然后查找来完成class exists class 但还有其他方法吗 tokens to
  • Java查找数组索引中的最后一个成员

    假设我有一个大小为 10 的数组 索引范围为 0 到 9 我添加了一堆元素 并在索引 6 处停止添加 因此 使用 array length 我可以知道数组的大小为 10 但是如何找到哪个索引包含最后一个值 而该索引之后为空 我应该做一个循环
  • Javascript 代码,未终止的字符串文字

    错误控制台 未终止的字符串文字 html li div class above question number Question Title div JQuery 代码是 html li li div class above questio
  • 如何获取子进程的返回码

    在windows中生成子进程获取返回值的方法是什么 看起来像ShellExecute 使用起来比原来更简单CreateProcess 但从我迄今为止所做的阅读来看 两者都没有表明如何检查生成进程的返回值 这是怎么做到的 谢谢 安迪 要获取
  • 无法在 Mac 上启动 ElasticSearch

    我安装了elasticsearch by brew install elasticsearch并开始它brew services start elasticsearch 然而 curl http 127 0 0 1 9200 shows c
  • 如何比较 python 函数的性能? [复制]

    这个问题在这里已经有答案了 我已经编写了两个函数来做完全相同的事情 但我不知道哪个更快更好 我如何比较这两个函数 看看哪一个在性能和其他方面更好 The timeit http docs python org library timeit
  • 如何保留 Spark HashingTF() 函数输入的键或索引?

    基于 1 4 的 Spark 文档 https spark apache org docs 1 4 0 mllib feature extraction html https spark apache org docs 1 4 0 mlli
  • 计算向量中所有差异的可能性

    假设我有一个短向量x a b c d e 计算向量成员之间的所有差异的最佳方法是什么 y e d e c e b e a d e d c d b d a c e c d c b c a b e b d b c b a a e a d a c
  • 您可以为 SQL 2008 查询设置默认架构吗

    我有一个名为应用程序的模式 有没有一种方法 而不是使用语法 SELECT FROM application table 我可以设置默认架构 以便我可以使用 SELECT FROM table 我想这与 using 语句的想法相同 所有 sq
  • ejabberd MAM 不适用于 MUC

    xep 0313 适用于名册 但不适用于房间聊天 我可以获取名册的存档消息 但无法获取房间的存档消息 为什么
  • 使用 scipy 应用 Sobel 过滤器

    我正在尝试在图像上应用 Sobel 滤波器以使用 scipy 检测边缘 我在 Windows 7 Ultimate 64 位 上使用 Python 3 2 64 位 和 scipy 0 9 0 目前我的代码如下 import scipy f
  • 空白而不是零

    Duration isnull FunctionA DateA DateB 上面的函数计算天数 如果 day 为空 则显示 值 0 而不是空白值 如何更改上面的代码 使其显示空白而不是 0 值 null 如果您的函数返回一个整数 则结果来自
  • Reflect.getMetadata 在 Angular2 中不起作用

    我用过这个 Reflect getMetadata annotations AppComponent 0 template 在 plunker 中它工作得很好http plnkr co edit f47uORghJXaq0FtD00Th p
  • asp.net Base-64 字符串中的无效字符

    我有一个 C 移动网站 并且在使用某些移动客户端时遇到问题 我在下面发布了一条跟踪 但基本上是手机浏览器或手机连接到互联网 url 的 wap 网关对表单中的视图状态隐藏输入进行编码 wEPDwULLTExNTMyOTcwOTBkGAEFB
  • 在 ASP Web API 中指定无效参数时返回错误

    我正在使用 C 和 ASP NET Web API 创建一个 API 并且希望它在使用无法识别的参数时返回错误 例如 api Events 应该有一个事件列表 api Events startTime startTime 应该返回在特定时间
  • “wordlist”的非数字第二个参数

    我正在 Eclipse android 中构建一个 c 项目并收到以下错误 这是 ndk 构建错误 与我的代码无关 Users eladb MyWorkspace android ndk r8e build gmsl gmsl 512 no
  • 获取pandas数据框中子节点的所有直接中间和最终父节点

    我的数据框具有父子关系 如下所示 child Parent relationship A1x2 bc11 direct parent bc11 Aw00 direct parent bc11 Aw00 ultimate parent Aee
  • 将 Flask 表单值转换为 int

    我有一个表格 其中发布了personIdint 到 Flask 然而 request form personId 返回一个字符串 为什么 Flask 不给我一个 int 我尝试将其转换为 int 但下面的路线返回 400 或 500 错误
  • jQuery 选择器上下文问题

    我试图做出以下选择 program row 其中 row 是包含两个表行的 jQuery 对象 其中一个 tr 具有 program 类 该选择器似乎没有找到它 但是以下方法有效 title row 其中 div title 是 tr pr
  • 使用CSS的圆形文本段落[重复]

    这个问题在这里已经有答案了 我一直在寻找一个关于如何将一段文本放置在圆圈内的体面且快速的解决方案 我发现有两种解决方案 解决方案1 浮动倍数div与文本左侧和右侧的文本高度相同 并通过更改 divwidth您可以调整文本的剩余空间 解决方案