css中文字超出div怎么办

css中文字超出div的解决方法是,给div添加overflow、word-break、word-wrap属性,并分别设置属性值为hidden、break-all、break-word即可。

css中文字超出div怎么办

本文操作环境:windows10系统、css 3、thinkpad t480电脑。

在div中输入了一串文字,但是文字内容确超出了,如下图所示:

77a57f22cca4025969b9a921153511f.png

现在我要让多出的文字自动换行 ,如下图所示该怎么做呢?

立即学习“前端免费学习笔记(深入)”;

3f2b64e4c9f34fdb7ebcf69cb518b2a.png

用到的属性:

overflow 属性规定当内容溢出元素框时发生的事情。

hidden    内容会被修剪,并且其余内容是不可见的。    

word-break 属性规定自动换行的处理方法。

break-all    允许在单词内换行。    

word-wrap属性允许长的内容可以自动换行。

break-word    在长单词或 URL 地址内部进行换行。    

具体实现代码如下所示:

html:

    nishi shfishfshfscccccccccccccccccccifhsssfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff 

登录后复制

css:

.dbubble-text {display: inline-block;font-size: 14px;color: #303030;line-height: 1.6;font-family: "微软雅黑";width: 200px;word-wrap: break-word;word-break: break-all;overflow: hidden;}

登录后复制

 学习视频分享:css视频教程

以上就是css中文字超出div怎么办的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2874460.html

(0)
上一篇 2025年3月10日 19:01:30
下一篇 2025年2月19日 07:16:45

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css怎么改变鼠标形状

    css改变鼠标形状的方法是,在指定元素上添加cursor属性,并将属性值设置为需要的值,如pointer、move、text等,具体代码如【Pointer】。 本文操作环境:windows10系统、css 3、thinkpad t480电脑…

    2025年3月10日
    200
  • css怎么更改字体

    css更改字体的方法是,给字体添加font-family属性,并且设置需要的字体属性即可,例如【p.serif{font-family:”Times New Roman”,Times,serif;}】。 本文操作环境…

    2025年3月10日
    200
  • css如何实现禁止选择文本

    css实现禁止选择文本的方法是,添加user-select属性,并且将属性值设置为none,表示文本不能被选取,具体代码如【user-select:none;】。 本文操作环境:windows10系统、css 3、thinkpad t480…

    2025年3月10日
    200
  • css如何设置下划线的颜色

    css设置下划线的颜色的方法是,给文本添加border-color属性,并且设置合适的颜色属性值即可,例如【border-color:#ff0000 #0000ff;】。 本文操作环境:windows10系统、css 3、thinkpad …

    2025年3月10日
    200
  • css如何使文字方向转90度

    css中可以使用transform属性使文字方向转90度,语法格式为“transform: rotate(90deg)”。transform属性表示元素应用2D或3D转换,当值为rotate时为旋转,正数为顺时针旋转,负数为逆时针旋转。 本…

    2025年3月10日
    200
  • css怎么设置元素层次

    在css中,可以使用z-index属性设置元素层次,只需要给指定元素设置“z-index:auto|数值;”样式即可;z-index属性可以指定一个元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 本教程操作环境:…

    2025年3月10日 编程技术
    200
  • css怎么让div垂直居中

    css让div垂直居中的方法:1、使用绝对定位和负外边距进行居中;2、利用伪元素和inline-block、vertical-align进行居中;3、利用table布局进行居中;4、使用固定定位和transform属性进行居中。 本教程操作…

    2025年3月10日
    200
  • css该如何去掉背景颜色呢

    css去掉背景颜色的方法是,给背景颜色添加background-color属性,并且将属性值设置为transparent即可,例如【background-color:transparent;】,transparent表示透明效果。 本文操作…

    2025年3月10日
    200
  • css如何去除字体的加粗效果

    css去除字体的加粗效果的方法是,给字体添加font-weight属性,并且将属性值设置为normal即可,例如【p.normal {font-weight:normal;}】,normal定义标准的字符。 本文操作环境:windows10…

    2025年3月10日
    200
  • css中的滑动条怎么隐藏

    css中的滑动条隐藏的方法是,设置【overflow:hidden】即可。如果我们要隐藏滚动条并在内容溢出时显示,只需要设置【overflow:auto】即可。 本文操作环境:windows10系统、css 3、thinkpad t480电…

    2025年3月10日
    200

发表回复

登录后才能评论