css样式处理超长的连续字母或数字,实现自动换行

Release time:2019年06月07日 Author:Catfish CMS Reading volume:8772

有的伙伴建站以后,会在自己的网站分享一些链接,并且有些链接是超长的,由于链接一般都是由字母、符号及数字组成,浏览器在处理显示连续字母时的默认方案是不做打断,按原样输出。所以过于长的链接会导致超出边界,会使得页面看起来很不协调,也有可能超出部分会覆盖边界外面的内容。

很显然,如果超长的链接会自动分配到两行或者三行显示,那么超出边界的问题也就迎刃而解了。

那么我们怎么让超长的链接实现自动换行呢?

我们需要使用css的“word-wrap”属性即可实现自动换行。

word-wrap

该属性允许长单词或 URL 地址换行到下一行。

语法:

word-wrap: normal | break-word ;

说明:

normal 只在允许的断字点换行(浏览器保持默认处理);

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

看到这里您应该已经明白,要强制自动换行的话很简单,只需要在需要自动换行的容器里加上“word-wrap: break-word;”即可。下面是鲶鱼系统主题的一个实例:

<h4 style="word-wrap:break-word">{$neirong.zhengwen}</h4>

扩展阅读

word-break

该属性规定自动换行的处理方法。

语法:

word-break: normal | break-all | keep-all ;

说明:

normal 使用浏览器默认的换行规则;

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

keep-all 只能在半角空格或连字符处换行。

overflow-wrap

该属性设置或检索当内容超过指定容器的边界时是否断行。

这个属性是CSS3增加的,CSS3中将“word-wrap”改名为“overflow-wrap”,浏览器支持情况:Chrome(23.0+)、Safari(6.1+)、Opera(15.0+)、iOS Safari(7.0+)、 Android Browser(4.4.0+)、Android Chrome(22.0+)

语法:

overflow-wrap:normal | break-word ;

说明:

normal:允许内容顶开或溢出指定的容器边界;

break-word:内容将在边界内换行。如果需要,单词内部允许断行。

提示:由于历史原因,当你使用“overflow-wrap”时,最好同时使用“word-wrap”作为备选,作向前兼容。

Reward

I want to comment Sign in to post a comment


Latest release

鲶鱼cms系统和鲶鱼blog系统怎么填写公安备案号和ICP备案号

在实际建站过程中,往往需要进行网站备案,那么当我们备案之后,需要按要求在自己网站上放上备...

关于鲶鱼Blog系统2.3.21版以后版本升级的说明

鲶鱼Blog系统可以在后台上传升级包进行升级,有些用户可能会很长时间没有升级,这样可能会...

鲶鱼CMS和鲶鱼Blog自制登录页面代码怎么实现

我们在《鲶鱼CMS和鲶鱼Blog怎么自定义登录页面》一文里面介绍了怎么在制作主题的时候自...

鲶鱼CMS和鲶鱼Blog怎么自定义注册页面

我们在《 鲶鱼CMS和鲶鱼Blog怎么自定义登录页面》这一篇里面介绍了如何自己制作一个登...

鲶鱼CMS和鲶鱼Blog怎么自定义登录页面

我们在使用鲶鱼cms和鲶鱼blog时,有的时候希望根据自己的需求设计登录页面,该怎么办?...

Catfish(鲶鱼) CMS和Catfish(鲶鱼) blog主题...

第五版Catfish(鲶鱼) CMS和Catfish(鲶鱼) blog主题制作手册已经正...

How to use the Catfish CMS system

Section 1: How to add articles

Management background is composed of five bl...

Section 2: to the article to add c...

In the previous section, we talked about how...

Section 3: Add a menu to your site

In the previous section we talked about how ...

Section 4: Page Setup

To the last section we have learned to use t...

Section 5: Change website name, LO...

By the end of the previous section, we have ...

Copyright © 2015 - 2020 Catfish(鲶鱼) CMS
Catfish(鲶鱼) CMS〖181836340〗 Catfish(鲶鱼) CMS 二群〖292598750〗

   I want to leave a message
Catfish(鲶鱼) CMS V 4.9.90