如何使用语义和干净的 HTML、CSS 来制作不均匀的文本换行(不是方形或圆形)?

2024-04-18

如何使用语义和干净的 HTML、CSS 进行这样的文本换行?与所有浏览器兼容。

添加不同的类<p>如果没有其他解决方案,这是我想到的唯一解决方案。

但这样每次客户都无法更改类,这是缺点。


您可以将图像设置为背景<p>然后将透明容器以您不希望文本重叠的形状漂浮在背景图像上方。

<p>
    <span id="block1"></span>  
    <span id="block2"></span>  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
</p>

使用以下 CSS:

p {
   background: url(your-image.png) no-repeat 100% 0;
}

#block1 {
   float: right;
   width: 100px;
   height: 100px;
}

#block2 {
   clear: both;
   float: right;
   width: 200px;
   height: 50px;
}

但缺点是,与段落类解决方案一样,这是一个非常手动的修复。你可以看到在这里行动 http://jsfiddle.net/mjMBz/1/.

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

如何使用语义和干净的 HTML、CSS 来制作不均匀的文本换行(不是方形或圆形)? 的相关文章

  • 绝对元素后面元素上的文本选择

    我有一个覆盖元素 它隐藏了其他包含文本的 div 覆盖元素是绝对定位的 我希望用户能够选择这些 div 后面的文本 我的解决方案是隐藏用户事件 mouseDown 上的覆盖层 显示 无 并在 mouseUp 事件发生时再次显示它 这样 一旦
  • css伪类最后一个子问题

    我在使用时遇到问题 last child伪选择器 我有以下标记 div class apply container div
  • 无法在 css 中使用 .ani 光标?

    我自定义了网站的光标 但是CSS光标 url 仅适用于 gif png 或 cur 我想使用 ani 文件 但它只能在 IE 中使用 cursor url img mcursor cur auto IE 使用 Windows API 支持
  • 作为数据流写入 div

    考虑写入 div 的 AJAX 调用 recent req post result php d data function returnData content html returnData PHP 脚本位于result php执行一些需
  • 获取动态图像的宽度和高度

    我有一个img嵌入隐藏标签内div 当用户单击具有图像名称的动态超链接时 图像必须显示在模式窗口中 为了将 div 定位在模态窗口内 需要图像高度 但是当点击超链接后 src被分配 高度为0 所以图像不能在中间对齐 请帮助我在浏览器中显示图
  • 使用 CSS 格式化日期/时间或百分比值?

    有没有办法使用 CSS 来使用特定格式格式化日期 例如YYYY MM DD 或 MM DD YYYY 有或没有时间 也可以将数字格式化为保留 2 位小数的百分比值 例如5 4321987 显示为 5 43 我可能可以使用 JavaScrip
  • 如何从 jQuery $.getJSON() 请求获取原始 JSON 响应?

    如何从 jQuery 获取原始 JSON 响应 getJSON 要求 我只想打印原始响应alert 我的浏览器中的对话 从 jQuery 1 5 开始jqXHR http api jquery com jQuery ajax jqXHR对象
  • 如何在全日历上获取外部拖放事件的开始和结束日期

    我有一个关于完整日历拖放功能的快速问题 这是我的 JS 代码 calendar fullCalendar header left prev next today right title editable true droppable tru
  • 如何将水平 ul 列表中的项目与图像垂直对齐?

    我有以下 html 代码 div ul li a href index php site login About a li li a href index php site login FAQ a li li a href http twi
  • $.ajax(); 之间的区别和 $.ajaxSetup();

    有什么区别 ajax and ajaxSetup 在 jQuery 中如下 ajax cache false and ajaxSetup cache true 另外 哪一个是最好的选择 以下将阻止all无论您使用哪种 jQuery 方法 g
  • 使用 Jquery 更改 css 属性时的事件检测

    有没有办法检测元素的 显示 css 属性是否更改 是否更改为无 块或内联块 如果没有的话有什么插件吗 谢谢 Note 突变事件 https developer mozilla org en US docs Web Guide Events
  • 使用 Jasmine 模拟 jQuery ajax 调用

    我正在使用 Jasmine 2 5 2 为使用 jQuery 3 1 1 执行 Ajax 请求的代码编写单元测试 我想模拟 Ajax 调用 提供我自己的响应状态和文本 我正在使用 Jasmine ajax 插件 https github c
  • ajax 调用成功后点击链接 href

    我有一个正常的链接 a href http www google com class continue Continue a 我已将点击绑定到一个事件来发布 ajax 请求 如下所示 continue click function ajax
  • 将 DIV 转换为单击并拖动视口

    有人知道一种不显眼的 基于原型或无框架的方法将具有大内容 例如地图 的 DIV 转换为具有固定尺寸的可点击和可拖动的 地图 容器 非常像 Google 地图 我想在大型输入表单中显示 HTML 块 这些块可能会超出可用空间 每个块可以有大约
  • 响应覆盖 div 下的链接

    场景是这样的 我已经构建了一个顶部导航原型 它需要在其顶部有一个覆盖 透明 PNG 图像 目前它覆盖了大约 1 3 的链接 请看下面 有什么方法可以让前 1 3 的链接做出响应 即使有一个 div div 部分覆盖它们 覆盖层不会包含任何可
  • 我可以使用 :hover 触发 CSS3 动画(或过渡),即使鼠标不再悬停,该动画也会继续运行

    我正在创建一个链接列表 其中一个链接容器在悬停时会展开 包含详细信息 图像和说明 我用 CSS 过渡或动画来制作动画没有任何问题 问题是我希望它即使在鼠标移开后也能保持展开状态 我想在没有 JavaScript 的情况下做到这一点 那可能吗
  • IE 中带有“删除”方法的 jQuery.ajax 问题

    我有一个页面 用户可以使用按钮编辑各种内容并选择触发 ajax 调用 特别是 一个操作会导致远程调用一个 url 其中包含一些数据和 放置 请求 这 因为我使用的是宁静的 Rails 后端 会触发我的更新操作 我还有一个删除按钮 它调用相同
  • 将记录转换为序列化表单数据以通过 HTTP 发送

    有没有办法转换此记录 TError record code Word message String end TState record caption String address Cardinal counters TArray
  • CSS 未使用 req.params 或其他内容加载

    我对节点 表达等非常陌生 我制作了一个博客应用程序 但遇到了问题 我正在使用 mongoose node express 和 ejs 当我打电话时 router get posts function req res Post find fu
  • 如果列表在初始化之前为空,则 jQuery 可排序无法与水平列表正常工作

    如果我在初始化后将元素添加到列表中 sortable它无法正常工作 参见示例jsFiddle http jsfiddle net NQMPr 1 示例 HTML div class container div br

随机推荐