英文的wordwrap

CSS文本:word-wrap .28

语法:
word-wrap : normal | break-word
取值:
normal : 默认值。允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要,词内换行( word-break )也将发生

说明:
设置或检索当当前行超过指定容器的边界时是否断开转行。
此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 wordWrap 。
示例:
div { word-wrap: break-word; word-break: break-all; }

wordwrap

(PHP 4 >= 4.0.2)

wordwrap --  Wraps a string to a given number of characters using a string break character.

Description

string wordwrap ( string str [, int width [, string break [, boolean cut]]])

Returns a string with str wrapped at the column number specified by the optional width parameter. The line is broken using the (optional) break parameter.

wordwrap() will automatically wrap at column 75 and break using '/n' (newline) if width or break are not given.

If the cut is set to 1, the string is always wrapped at the specified width. So if you have a word that is larger than the given width, it is broken apart. (See second example).

注: The optional cut parameter was added in PHP 4.0.3

例子 1. wordwrap() example

<?php
$text
= "The quick brown fox jumped over the lazy dog.";
$newtext = wordwrap($text, 20, "<br />");

echo
"$newtext/n";
?>

This example would display:

The quick brown fox
jumped over the 
lazy dog.

例子 2. wordwrap() example

<?php
$text
= "A very long woooooooooooord.";
$newtext = wordwrap($text, 8, "/n", 1);

echo
"$newtext/n";
?>

This example would display:

A very
long
wooooooo
ooooord.
### CSS `word-break` 和 `word-wrap` 属性详解 #### 定义与功能 CSS中的`word-break`和`word-wrap`属性用于控制文本如何在容器内换行。这两个属性虽然有相似之处,但在具体行为上有显著区别。 对于`word-break`属性而言,其主要作用是在必要时打破单词边界来适应指定宽度的盒子模型[^2]。此属性具有三个常用值: - **normal**: 使用默认的断字规则。 - **break-all**: 此选项允许在任何字符间断开单词,即使这意味着在一个汉字中间打断它也无妨。 - **keep-all**: 防止非空格字符序列被拆分到两行或多行显示;仅当遇到实际存在的空白符时才会发生折行操作。 另一方面,`word-wrap`(现已更名为`overflow-wrap`)主要用于处理那些过长而无法正常换行的文字串。如果启用了这个特性,则浏览器会在适当位置强制插入软换行点以防止溢出容器边缘的情况出现[^4]。 #### 实际应用案例分析 为了更直观地理解两者间的不同,在下面给出了一段HTML代码片段及其对应的渲染效果说明: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Word Break and Wrap Example</title> <style type="text/css"> .example { width: 150px; border: 1px solid black; padding: 5px; } /* 设置不同的 word-break 值 */ .break-normal { word-break: normal; } .break-all { word-break: break-all; } .keep-all { word-break: keep-all; } /* 启用/禁用 word-wrap (现为 overflow-wrap) */ .wrap-normal { overflow-wrap: normal; } .wrap-break-word { overflow-wrap: break-word; } </style> </head> <body> <div class="example break-normal wrap-normal">这是一个非常长而且没有任何间隔符连接在一起形成的字符串。</div><br/> <div class="example break-all wrap-normal">这是一些连续的日语假名:あいうえおかきくけこさしすせそたちつてと...</div><br/> <div class="example keep-all wrap-break-word">英文句子通常由多个单词组成并以空格隔开 Each English sentence is made up of multiple words separated by spaces.</div> </body> </html> ``` 上述例子展示了三种情况下文字的表现形式变化——通过调整`.example`类下的子元素所附加的具体样式类别实现对比展示目的。值得注意的是最后一个实例中同时设置了`word-break: keep-all`以及`overflow-wrap: break-word`两个参数组合使用的效果。 #### 关键点总结 - 当希望严格遵循原有文本结构而不随意切割词语时应选用`word-break: keep-all`; - 对于需要尽可能紧凑排列内容的情形可以考虑采用`word-break: break-all`; - 若目标在于避免因单个超长不可分割单元造成布局破坏则推荐开启`overflow-wrap: break-word`机制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值