1. 犀牛前端部落首页
  2. 新手错误

p标签里面的文字不自动换行word-break[解决办法]

原因

标签里面的内容不自动换行,因为我们使用的是一个长单词,比如:aaaaaaaaaaaa 中间没有换行。

只有再单词分隔时才会自动进行换行,如果你有一个很长的单词,那么它是不会换行的。

正确的解决方案是编写真实内容而不是没有意义的长字符串,如果你正在使用用户生成的内容,应该对特别长的单词进行检查并禁止它们。

解决办法

word-break

我们可以使用CSS的word-break属性来让单词换行,例如以下代码:

p { word-break: break-all }

浏览器兼容可以查看这个链接

overflow

我们还可以使用overflow来隐藏该内容,例如以下代码:

p{
overflow:hidden
}

 

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2563.html

发表评论

登录后才能评论