如何使用 CSS 将长单词换行并避免水平滚动?

2023-11-23

我有以下 html:

<div class="box">
    long text here
</div>

and css:

.box {
    width: 400px;
    height: 100px;
    overflow: auto;
    border: 1px gold solid; 
}

我只想要一个垂直滚动。但当单词太长时,就会显示水平滚动条。如何让长单词换行?

如果需要,我可以使用 jQuery 或 PHP 的技巧,但我想使用 CSS 来解决它,因为这是 CSS 的工作。

你可以在这里摆弄:http://jsfiddle.net/879bc/1/


word-wrap: break-word

https://developer.mozilla.org/en/CSS/word-wrap

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

如何使用 CSS 将长单词换行并避免水平滚动? 的相关文章

  • onClick 事件适用于触摸屏设备上的触摸吗?

    我用过onclick我的网站上的活动 但是 当我在谷歌浏览器的开发人员模式移动视图中打开它时 触摸使用鼠标单击的元素没有任何反应 所以我的问题是 我还必须添加吗ontouch事件连同onclick事件或 onClick 事件适用于所有触摸屏
  • CSS 关键帧动画的随机“起点”

    我有一个带有垂直滚动背景图像的框列表 keyframes movie 0 background position 50 5 50 background position 50 95 0 background position 50 5 mo
  • 从 CSS 调用 javascript 函数

    我想知道是否有可能以任何方式 button width somePX height somePX button hover onmouseup func button 或类似的东西 我想这会有点酷吗 而不是为每个按钮编写 onmouseup
  • 旋转后变换比例

    我有个问题 我正在将 div 旋转 45 度 然后我想在新的 y 轴上缩放它http jsfiddle net P37g5 2 http jsfiddle net P37g5 2 y 轴现在不是 45 度吗 我不确定我是否正确理解了这个问题
  • 如何在严格模式下设置元素样式属性?

    Given body document getElementsByTagName body 0 iframe document createElement iframe iframe src protocol settings script
  • .addClass 仅添加到无序列表中单击的项目符号

    我有一个简短的无序列表 其中有两个项目符号 我添加了一些 Javascript 这样当我单击项目符号时 它会向其中添加一个类 问题是 它将该类添加到所有现有的 li 中 而不仅仅是我单击的那个 这是 JSFiddle http jsfidd
  • 如何在 CSS 中使用 3 位颜色代码而不是 6 位颜色代码?

    我最近检查了我的 CSS 文件 并将所有六位十六进制代码转换为简单的三位数代码 例如 我的 FDFEFF被缩短为 FFF 它呈现的颜色与以前几乎完全相同 在我看来 中间部分相当无用 删除它们在我的 CSS 文件中节省了整整 300 个字节
  • 如何使 Flexbox 父级具有其子级的宽度?

    我有一个父元素 里面有两个元素 div class parent div class child one div div class child two div div 目前 parent 的宽度为 100 我希望它只是两个孩子的宽度 pa
  • Div 上的倾斜边框

    我正在尝试倾斜一个 div 类似于 使用 css 倾斜 div 的顶部而不倾斜文本 https stackoverflow com questions 13591584 slant the top of a div using css wi
  • 为什么 IE10 要求存在 p:hover {} 规则才能使转换在伪元素上起作用?

    HTML p Hover p CSS p after content here transition all 1s p hover after font size 200 color red 现场演示 http jsfiddle net S
  • Chrome 中的 CSS 列不平衡

    我想使用以下方法在多列中动态显示一些 Bootstrap 列表组CSS 列 https developer mozilla org en US docs Web Guide CSS Using multi column layouts 但我
  • CSS“概述”Webkit 和 Gecko 上不同的行为行为

    我正在做一个实验 我发现 轮廓 CSS2 属性在 Webkit 和 Gecko 上的实现方式不同 在下面的脚本中 我有一个绝对位置 div 在另一个 div 内 但浮动在其外部 Webkit 上的轮廓概述了实际的父 div 而在 Gecko
  • 如何用css3和html5制作不规则形状的div?

    我想知道是否有可能构建具有不规则形状的 div 类似于此 例如格陵兰岛 欧洲 非洲 我想使用 CSS3 和 HTML5 创建像这里这样的地图 以下是示例图像的链接 你所拥有的看起来像一个网格 你可以通过一个 div 上的许多渐变来获得它 也
  • Bootstrap 3 - 使用垂直滚动条水平拖动元素,overflow-y:滚动

    在我的失败之后上一篇文章 https stackoverflow com questions 23586926 bootstrap grid with scrollable affixed column noredirect 1 comme
  • 盒子大小是否可在电子邮件模板中使用

    我正在创建电子邮件模板 我发现了这个CSS 支持指南 https www campaignmonitor com css but box sizing不在那儿 我想知道是否支持该 CSS 属性 如果支持 哪些电子邮件客户端支持它 不 不支持
  • 用于选择 querySelector 中当前元素的 CSS 伪选择器可用于同级 (+) 或一般同级 (~) 选择器? [复制]

    这个问题在这里已经有答案了 如果我有这个 HTML div class elem div class child div div div class sibling div 和JS let elem document querySelect
  • 使用边距与填充? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我最近开始自己在线学习周三开发 并且是这个领域的新手 所以对我的基本查询表示歉意 我知道边距和填充之间的区别 用逻辑术语 但不太确定 何时应该使
  • 如何在 Bootstrap 4 轮播中堆叠多个图像

    我不知道如何使用 Bootstrap 4 以及如何在一张幻灯片中显示多个小图像 例如缩略图 而不是让图像填充轮播的宽度 我已经使用下面的代码尝试了一些操作 但仍然无法堆叠很多图像 div class container h2 class t
  • 更改 CSS 样式表的选择器属性

    以下是我们传统上如何更改重复元素的样式 将样式应用到每个元素 function changeStyle selector prop val var elems document querySelectorAll selector Array
  • Ie11 不应用媒体查询样式

    IE11 忽略我的媒体查询并始终使用移动 CSS 奇怪的是 如果我改变浏览器宽度 即使只是 1 2 像素 浏览器也会自行渲染并显示媒体查询 我尝试了 css lint 我的 css 中没有错误 我的CSS没有什么特别的 只是简单的 css

随机推荐