自动换行链接,使其不会溢出其父级 div 宽度[重复]

2024-04-17

我有这段代码:

div#permalink_section {
  width: 960px
}
<div id='permalink_section'>
  <a href="here goes a very long link">here goes a very very long link</a>
</div>

链接文本可能非常长,当其长度超过 div 宽度时,它会溢出 div。当链接的宽度超过 div 宽度时,有没有办法强制链接断开并转到下一行?


以下是跨浏览器兼容的解决方案:

#permalink_section
{
    white-space: pre-wrap; /* CSS3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

From 如何在 https://stackoverflow.com/questions/3247358/how-do-i-wrap-text-with-no-whitespace-inside-a-td/5108367#5108367

内换行没有空格的文本?

检查工作示例here http://jsfiddle.net/5zsqP/1.

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

自动换行链接,使其不会溢出其父级 div 宽度[重复] 的相关文章

  • 用于移动 Web 应用程序的带有图表的框架

    我正在开发一个移动网络应用程序 我需要在饼图中表示一些数据 但是我没有找到任何好的框架来提供良好的选择并在移动设备上正常工作 我想知道一些框架 免费 这可以帮助我 如果您能给出一些基础示例 我会感到惊讶 我正在考虑使用 ajax 技术来显示
  • 禁用 Firefox 的自动填充

    是否可以禁用 Firefox自动填充功能而不禁用自动完成 我知道我可以这样做 autocomplete off 但我不想禁用自动完成 只是禁用自动填充 Firefox 正在填充一些本应为空的隐藏字段 这主要是用户刷新页面时出现的问题 表单字
  • CSS -webkit-外观:无;导致复选框未被选中

    All 我有一个复选框 我应用了以下 CSS 样式 webkit appearance none 我拥有的一些文本字段上有相同的代码 并且它们仍然可以正常工作 为什么此功能会导致不允许选中复选框 我喜欢这种复选框的样式 但仍然需要该功能才能
  • 添加 Javascript 按钮来更改 iframe 的内容

    我正在尝试创建此页面 其中有一个 Iframe 并且我想添加一个按钮来显示 iframe 中的下一页 以及一个按钮来显示 iframe 中的上一页 我总共有 4 个页面要在名为 1 html 2 html 3 html 4 html 的 i
  • iText7:如何获取段落的实际宽度

    在添加到文档之前 我需要知道段落的宽度 以磅为单位 我在这里搜索并找到了 Alexey 关于段落高度的答案 所以我用宽度做了它 但它不起作用 无论段落有多长 始终返回矩形的宽度 我尝试了这段代码 private float getRealP
  • 仅 CSS 下拉菜单不像 iPad 等。跟随菜单链接而不显示菜单

    我们在这里创建了一个新网站 www worthingleisure co uk splashpoint 它的顶部有一个纯 CSS 菜单 通过使用 li hover ul 方法并适当显示和隐藏 该菜单应该适用于 iPad iPhone 和其他
  • 使用 PHP 简单 HTML DOM 将隐藏的输入标记值作为字符串获取

    我试图获取输入类型隐藏标记值 CAS AH 11 等 以及名称属性 但在运行基于 PHP 的解析器时我得到的只是一个空白页 有人知道出了什么问题吗 我已经查过了将隐藏输入作为字符串抓取 使用 PHP 简单 HTML DOM 解析器 http
  • 在模态上自动滚动引导模态('show')

    我有一个用于评论的引导模式 评论表格附加在评论列表的底部 我希望此模式在打开时滚动到列表底部 如果有超过 2 或 3 条评论 我已经安装了这个幻灯片插件 http jesseprice com jquery slide to plugin
  • CSS 列数导致项目拆分列

    尝试不使用 jQuery 脚本来实现砖石效果 因此寻找 CSS 替代方案 我正在尝试使用列计数 这似乎有效 但不符合预期 因此 列就在那里 但有时容器中的项目会被拆分为多个列 正如您应该在此示例中看到的那样 http jsfiddle ne
  • 本机反应:“order”不是有效的样式属性

    顺序是 Flex 中一个有用的属性 我在互联网上搜索这个 概括 CSS order 属性指定用于在 Flex 容器中布置 Flex 项目的顺序 元素按顺序值的升序排列 具有相同 order 值的元素按照它们在源代码中出现的顺序排列
  • 带有 viewbags 的 MVC 数据集

    如何将数据集放入视图袋中并在视图中显示结果 我有一个来自模型的数据集 并将其写入视图包 我想使用 foreach 循环从视图中的视图包中获取数据行 我已经有一个变量进入视图 所以我无法正常传递数据集 每页我还会有许多其他数据集 所以我认为
  • 使用“SVG 多边形”悬停状态在“SVG”之后淡入 div

    有没有一个只用CSS来解决这个问题的方法 我希望能够在 SVG 之后淡入 div 但前提是用户将鼠标悬停在 SVG 多边形上 代码看起来像这样
  • Asp 按钮悬停和 CSS

    我有一个 asp 按钮控件 我在上面应用了一些样式 我希望鼠标悬停在该按钮上时 按钮的颜色应该发生变化或类似的情况 但我不明白为什么在 CSS 中按钮悬停功能不起作用 请帮忙 另请让我知道按钮悬停的最佳效果是什么
  • 如何用方向键移动div

    我想使用 jQuery 用箭头键移动 div 所以右 左 下 上 找到了我想要完成的演示here http atomicrobotdesign com blog htmlcss move objects around the canvas
  • HTML 中按钮内的图标

    我需要在 HTML 中将小图标放在按钮内 例如 我需要在我的网站上有 facebook 按钮 在按钮内首先是 F 图标 然后是 facebook 怎么做
  • 改变换行行为

    我可以在 TextView 中使用 Spannable 创建具有不同外观 下划线 删除线等的跨度 我怎样才能做同样的事情来改变换行行为 特别是 我不希望电子邮件地址在中间换行 我希望它像一个单词一样 I tried 包裹在一起跨度 http
  • 为什么行框之间有空格,而不是由于半行距?

    在下面的代码示例中 您将看到垂直流动的之间有空白spans是 每个之间有空白line box 我想首先声明这与之间的差距无关inline block框 甚至是结果半领先 https www w3 org TR CSS21 visudet h
  • 如何在 Firefox 和 IE 中获得 user-modify:read-write-plaintext-only 行为

    Chrome Safari 支持 CSS webkit user modify read write plaintext only 它可以禁止用户将富文本粘贴到 contenteditable div 中 我不知道如何在 Firefox 和
  • IE9支持CSS线性渐变吗?

    有了 Chrome Safari 和 Firefox webkit gradient and moz linear gradient特性 我怎样才能用 IE9 做同样的事情呢 最好的跨浏览器解决方案是 background fff back
  • CSS 转换的中断对于相同的属性值不起作用

    I ve 回答了一个问题 https stackoverflow com a 43372990 3162554关于如何在悬停子元素时启动动画 然后保留应用的样式 直到取消悬停父元素 然而 我在我提出的解决方案中发现了一个我无法解释但我想理解

随机推荐