打破浮动图像周围的长词

2024-02-20

我正在尝试在移动设备上创建页面显示。它的布局是这样的:

/---------\ some text around 
|         | the image. some
|  image  | text around the
|         | image. some text
\---------/ around the image.
some word around the image.
some word around the image.

我使用浮动样式来实现:

<div style="word-wrap: break-word; word-break: break-all;">
  <img src="someimg.jpg" style="float: left;"/>
  some text around the image. some text around the image. ...
</div>

但是,如果单词长于右侧区域最大长度但短于整个 div,则它不会被破坏,而只是移动到图像下方。

/---------\ some text around 
|         | the image.
|  image  | 
|         | 
\---------/ 
a-word-longer-than-right will
not be break and just display
below the image while a-word-
longer-than-the-whole-area-wi
ll-be-break-into-next-line

如何将比右侧更长的单词拆分并填充空白区域?


Insert &shy;长单词中的软中断。有各种基于字典的 PHP 库可以为您做到这一点。

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

打破浮动图像周围的长词 的相关文章

  • 使用 SASS 切换用户主题 - Ruby on Rails

    所以我有一个 Rails 管理系统 允许用户选择一个主题 基本上是一组 SASS 颜色变量 它将使用新颜色重新编译 application css scss 当用户从下拉菜单中选择并提交时 更改此设置的最佳方法是什么 我阅读了一些有关缓存和
  • 向 jQuery 函数 Interval 添加动画

    我的问题是如何向倒计时器添加一些动画 我的意思是每次调用 Function Interval 时都需要添加一些动画 如下所示 youtube 视频链接 https www youtube com watch v A9fnvhcWPRo 第二
  • 根据窗口大小调整 div 及其内部内容的大小

    我已经查找了一百万种技术 但我无法让它发挥作用 我知道还有其他类似的帖子 如果它给任何人带来麻烦 我很抱歉 但我需要针对我的代码的具体说明 因为我很愚蠢 提前非常感谢 我希望 div 容器 contentContactBox 以及其中的所有
  • onMouseEnter 和 onMouseLeave 未按预期运行

    我正在尝试为我的组件模拟悬停效果 然而 onMouseEnter Leave 事件没有按预期工作 现在我试图让它简单地 console log 一个字符串来检查它是否正常工作 但什么也没有发生 目的是我可以在悬停时更改其背景颜色 我尝试通过
  • 显示居中的图像行

    我有一排三张图像 目前显示得很好 现在 我想在这三个图像的正下方显示另外两个图像 并且我希望它们居中 它看起来有点像一个颠倒的金字塔 无论我做什么 底行都保持左对齐 这是 css category width 176px font size
  • jQuery hide() 动画向右滑动

    使用 jQuery 的hide 使用可选的持续时间参数的函数 我可以在我的网站上获得一些警报框 以优雅地滑出屏幕并消失 隐藏动画的默认方向似乎是向左滑动 尽管此行为未在hide 定义页 http api jquery com hide 我需
  • 滚动效果:先慢后快

    我正在尝试创建滚动效果 当onclick事件被触发 我想要那个div1滚动到dev2 一开始应该慢 然后快 这是一个使用此效果的网站 http community saucony com kinvara3 http community sa
  • 如何将 OTF/TTF 文件转换为 EOT 格式?

    我需要使用 font face 功能 并且我的字体是 OTF TTF 格式 而 Microsoft 浏览器仅支持 EOT 格式 我尝试使用微软工具WEFT 但它不起作用或者我不明白它是如何工作的 还有其他方法可以将我的字体转换为 EOT 格
  • 如何使

    我有一个列表 用作选项卡列表 div ul class TabControl li a href search Funds Funds 60 a li li a href search Companies Companies 4 a li
  • 如何修复连接的可排序对象位置错误的可拖动助手(部分由浮动/相对定位的父元素引起)?

    Preface 我遇到一个问题 当使用放置在浮动 相对定位的父元素中的可拖动元素 可排序元素时 可拖动帮助器偏移不正确 浮动父元素是 Bootstrap 列 其中多个可排序列表放置在一列中 可拖动列表放置在另一列中 Example 这是一个
  • CSS - 为什么我无法设置 元素的高度和宽度?

    我正在尝试使用以下 html 标记创建 css 按钮 a href access php class css button red Forgot password a 但它最终不会比中间的文本大 即使我已经设置了班级的高度和宽度 顺便说一句
  • 是否可以在 Javascript 中的 css3 转换期间获取目标计算的 css 属性值?

    是否有可能在 Javascript 中的 css3 转换期间获取目标 最终 计算的 css 属性值 我找到了这个答案 是否可以在 Javascript 中的 css3 转换期间获取目标 css 属性值 https stackoverflow
  • CSS Font-Face url 不起作用?

    我在使用 font face 选择器时遇到了一些问题 我有以下问题 font face font family MuseoSans 700 src url http mysite co uk clients reload Images st
  • 如何将模糊屏幕设置为整页并在点击页面时转到顶部

    CSS1 有效 parentDisable z index 2000 width 100 height 100 display none position absolute left 0 background url images btra
  • 使网格项跨越到隐式网格中的最后一行/列

    当我不知道行数时 是否可以使网格项跨度从第一行到最后一行 假设我有以下 HTML 内容 其中包含未知数量的框 我怎样才能做到第三个 box从第一条网格线到最后一条网格线 container display grid grid templat
  • 如何使用 jQuery 在按下按钮后保持按钮处于活动状态

    我见过一些非常相似的问题 但一直无法找到我正在寻找的答案 我已经确定了解决方法 但想知道执行该任务的正确方法 我想要的是单击按钮并使活动状态保持不变 下一次单击将切换状态 这是所需的 我真正需要知道的是如何解决 uiButton activ
  • 在 R Shiny 中,如何使用可排序 js 将其在列表中出现的顺序次数附加到每个列表元素?

    下面的可重现代码适用于将元素从一个面板拖动到另一个面板 并在 拖动到 面板中自动使用 HTML CSS 对拖入的每个元素进行排名顺序编号 但是 我现在尝试附加到每个 拖动到 列表元素的末尾 使用某种形式的paste0 我假设 该元素在 拖至
  • 响应式2列2行布局

    我一直在试图弄清楚如何创建这个布局 我有一个 2 列布局 左列有 1 行 右侧有 2 行 我试图让它流畅地调整 我遇到的问题是 我希望右侧顶部图像的顶部与左侧图像的顶部对齐 而底部图像的底部与左侧图像的底部保持对齐 我应该使用桌子吗 这是我
  • 带缩略图的轮播和 bootstrap v4

    我看到了带有缩略图的轮播演示bootstrap 3 here http jsfiddle net talmand JS6JV 我正在尝试为 bootstrap v4 实现相同的功能 但无法弄清楚如何修复一些 UI 细节 例如左 右阴影覆盖整
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo

随机推荐

  • 在一次调用中从多个表中选择

    在我的代码中 我有一个页面 其中包含来自 3 个不同表的信息 为了显示此信息 我进行了 3 个 SQL 选择调用 并将它们合并在一个列表中 以作为模型传递到我的视图 我可以通过一次 SQL 调用来完成此操作吗 数据之间没有任何联系 My c
  • 如何创建特定(R、G、B)颜色的 openCV 图像并获取该颜色名称?

    我需要创建一个填充一些 R G B 颜色的图像 并获得该颜色名称 例如 R G B 黑色或红色等 我们可以用 openCV 做这样的事情吗 如何做 具有静态方法的静态颜色图类 两个答案相结合 只需复制并使用即可 pragma once in
  • 按时间范围删除数据存储中的行

    我有一个 CKAN 数据存储 其中有一个名为 recvTime 的时间戳类型列 即在 datastore create 时使用 timestamp 作为类型 如这个链接所示 https github com telefonicaid fiw
  • 在php中从json_decode()获取值时出错?

    我有一个示例代码 description 2G Network GSM 850 900 1800 1900 3G Network HSDPA 850 900 1700 1900 2100 data json decode descripti
  • haskell中完整的缩进规则集

    从哪里可以获得 Haskell 代码编写的完整缩进规则集 过去的问题与我的以下问题类似 导致我提出上述问题 错误消息背后的原因是什么 parse error on input something 我收到的错误消息 Baby hs 103 2
  • 如何获取 git 中多个项目的任何分支中特定用户的提交列表?

    我在多个 git 项目的多个分支工作 我想获得所有这些项目和分支中特定日期的提交列表 用于时间表目的 虽然我可以为此目的编写实用程序脚本 但我不想重新发明轮子 有没有一种简单的方法可以使用现有的基于 UNIX 的工具或一些 git 高级用户
  • 选择两个 IP 范围之间的记录

    我有一张桌子 里面存放着ID Name Code IPLow IPHigh例如 1 Lucas 804645 192 130 1 1 192 130 1 254 2 Maria 222255 192 168 2 1 192 168 2 25
  • 将类型添加到 std 命名空间

    是否可以接受向std命名空间 例如 我想要一个 TCHAR 友好的字符串 那么以下可以接受吗 include
  • sass 无法编译,文件不可读或找不到

    转换错误 Jekyll Converters Sass 在转换时遇到错误 ng assets css all sass 找不到或无法读取要导入的文件 1 tools tools dir 1号线 这是我每次运行 Jekyll 时都会遇到的错误
  • 根据名称选择列表元素

    我有一个指定的向量列表 表示源自 2 个样本 A 和 B 的事件 l temp lt list SF1 t A c rep 1 10 SF2 t A c rep 9 15 SF1 t B c rep 8 12 l temp SF1 t A
  • 如何在 PDFSharp 中遍历 Pdf 对象树?

    我正在尝试使用 C 中的 PDFSharp 遍历现有 PDF 文档中的 PdfItem 对象树 我想创建一个所有对象的层次结构 类似于 PDF Explorer 示例所做的 但我希望它是一棵树而不是所有对象的平面列表 根节点是 docume
  • 函数模板的 typedef 的最佳替代方案?

    我想做的是这样的 template
  • Rails 5 Action Cable 与 Nginx、Puma 和 Redis 一起部署

    我正在尝试使用 Capistrano 将启用 Action Cable 的应用程序部署到 VPS 我正在使用 Puma Nginx 和 Redis 用于电缆 经过几个障碍后 我能够让它在本地开发环境中运行 我正在使用默认的进程内 cable
  • ASP.Net 6自定义WebApplicationFactory抛出异常

    我正在将现有的 ASP Net 5 Web 应用程序迁移到 ASP Net 6 并遇到了通过集成测试的最后障碍 我自定义 WebApplicationFactory 并抛出异常 Changing the host configuration
  • 打印浮点型/双精度型而不带尾随零? [复制]

    这个问题在这里已经有答案了 有几个与此相关的问题 但我还没有看到正确回答这个问题的人 我想打印一个浮点数 但我希望小数位数是自适应的 举个例子 0 gt 0 1234 gt 1234 0 1234 gt 0 1234 0 3 gt 0 3
  • Python pandas dataframe:找到另一列的每个唯一值的最大值

    我有一个大型数据框 从 500k 到 1M 行 其中包含例如这 3 个数字列 ID A B 我想过滤结果以获得如下图所示的表格 其中对于列 id 的每个唯一值 我都有 A 和 B 的最大值和最小值 我能怎么做 编辑 我已经更新了下面的图像以
  • 缩短 GCC 错误消息

    每当gcc无法找到具有多个重载的函数的匹配重载 它会给出一行又一行的错误 解释尝试了哪个重载以及为什么不使用它 虽然它通常很有用 但也常常没有用 因为问题是调用站点上的一个简单的拼写错误 在这种特殊情况下 它甚至没有帮助 因为甚至需要相当长
  • 如何通过比较两个 C# 对象来创建 JsonPatchDocument?

    鉴于我有两个相同类型的 C 对象 我想比较它们以创建 JsonPatchDocument 我有一个 StyleDetail 类定义如下 public class StyleDetail public string Id get set pu
  • Firebase集合组查询ID/密钥[重复]

    这个问题在这里已经有答案了 我一直在关注以下文档 https firebase google com docs firestore query data queries collection group query https fireba
  • 打破浮动图像周围的长词

    我正在尝试在移动设备上创建页面显示 它的布局是这样的 some text around the image some image text around the image some text around the image some w