使用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的圆形文本段落[重复] 的相关文章

  • 两个 Div 之间的固定宽度间隙

    有谁知道如何修复两个 div 之间的间隙 我有一个主要内容 Div 里面有两个带有图片的 Div 视图的宽度为 768 像素 当我开始拉伸视图时 两张图片开始相互远离 但理想情况下 主要内容 Div 应该在周围有空白的情况下拉伸 并且图片之
  • PHP MySQL 使用选项/选择 HTML 表单标签进行多重搜索查询

    我正在尝试使用两个搜索字段设置基本的 MySQL LIKE 搜索 我不想拥有它 所以它有多个可选搜索字段 例如if isset POST city isset POST name 我不知道如何用 HTML 来做到这一点
  • html 和 body 元素的高度

    我一直在互联网上查找 min height 和 height 属性如何在 body 和 html 元素上工作 我在很多地方都看到过下面的代码 html height 100 body min height 100 上面的内容可以与其他一些
  • PyCharm 中有 HTML 块 {%%} 的快捷方式吗?

    我正在使用 HTML 块 例如 block content 经常使用 但必须输入括号和百分比符号很麻烦 有没有捷径或其他方法可以自动执行此操作 到目前为止我刚刚发现这个 PyCharm 中有插入 的快捷方式吗 https stackover
  • 我可以在 CSS 类名中使用驼峰命名法吗

    我想命名一个 CSS 类并调用它imgSuper 我可以在 CSS 类中使用驼峰命名法吗 从技术上讲是可以的 但这是有风险的 因为虽然 CSS 语法大多不区分大小写 但在某些浏览器中 在某些条件下 类名被视为区分大小写 因为规范没有指定浏览
  • Flexbox 不适用于 iPad 和 Safari [重复]

    这个问题在这里已经有答案了 我在网站上使用 Flexbox 但它在 iPad Air iPad 3 和 Safari PC 上崩溃 设计和代码与此 codepen 类似 http codepen io anon pen xwJzEg htt
  • 为什么自关闭 iframe 标签会阻止显示更多 DOM 元素?

    在 Firefox 和 Safari 上 以下代码仅显示第一个 iframe 而添加结束标签可以解决问题 我不明白为什么它不起作用 当使用 DOMParser 解析第二个示例时 它无论如何都会转换为自关闭 iframe 在这里小提琴 htt
  • 在 javascript/jquery 中将光标更改为等待

    当调用函数时 如何让光标更改为此加载图标以及如何将其更改回 javascript jquery 中的普通光标 在你的 jQuery 中使用 body css cursor progress 然后又恢复正常 body css cursor d
  • 在html表格的每一行添加点击功能

    我最近创建了一个函数 它根据用户在网站中的输入进行一些复杂的名称匹配 并将结果作为表格格式的 html 文件返回 我的问题是如何在每一行添加点击功能 df get cust info returns a pandas dataframe d
  • 物化模式覆盖整个页面(模式弹出窗口未带到前台)

    由于保密原因 我无法上传 Web UI 的屏幕截图 物化模态应该表现得像here http materializecss com modals html 但不幸的是 我的网站发生的情况是 包括模式在内的整个页面都是 深色背景 的一部分 模式
  • 使用 jQuery/JS 打开时使
    标签的内容具有动画效果

    我只想要 HTML5 的内容details标记为 滑行 动画打开 而不是仅仅弹出打开 立即出现 这可以用 jQuery Javascript 实现吗 Fiddle http jsfiddle net 9h4Hq HTML
  • 如何设置菜单按钮和菜单项的样式

    我尝试更改菜单按钮中的样式 我可以更改菜单按钮样式 但不能更改其菜单项 无论我尝试什么 菜单按钮内的菜单项都保持不变 menu button fx background color black menu button label fx ba
  • 如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录?

    因此 就我而言 我使用 Iframe 将 Grafana 附加到我的页面 这为我提供了漂亮且易于使用的图表 可以注意到 每次在图表上进行放大或缩小 使用鼠标单击 交互后 Grafana 的 Iframe 都会在我的 Angular 页面上触
  • 保持未知数量的 div 居中,每行最多 4 个

    我有一个简单的问题 但我自己无法解决 简而言之 有一个未知电话我必须在页面中放置的元素数量 最多 每行 4 个元素 但仍居中 此图片给您一个提示 我为了示例而设置它 详细 在上图中我涵盖了不同的场景 例如 如果总共有 5 个元素 则应使用第
  • 仅从 PE 文件中提取 .text 部分

    我正在尝试从 PE 文件 dll 中提取 text 部分 即代码 Linux 或某些 python 或 ruby 库中是否有任何简单的工具可以让我轻松地完成此操作 我自己解决了 我使用 pefile python 模块提取文本部分 并使用
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • 指针事件:无,过滤,适用于 ie8 和任何地方,不适用于 ie9

    正如我在这里看到的 https stackoverflow com questions 3680429 click through a div to underlying elements 4839672 4839672 过滤器可用于模拟跨
  • 更改文本输入标签中文本的大小?

    我有一个很大的文本输入框 但我无法更改字体大小
  • 无效字符错误:“fred”

    我确信他一定是一个新手问题 简单来说 我想定义我的第一个 Polymer dart 组件 只是我一直在同一个减速带上踢脚趾 为了使事情变得非常简单 我将其简化为一个非常简单的示例 我做了一个简单的rename示例 跑表 来自 Dart 组件
  • FireFox 中的“contenteditable = true”高度问题

    当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch

随机推荐

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

    有没有一种方法可以检查文件中是否存在类而不包含 需要该类 就像是 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您可以调整文本的剩余空间 解决方案