如何使用自动换行或其他方式中断文本以适应流体宽度 div [英] How to use wordwrap or otherwise to break text to fit a fluid-width div

问题描述

我有一个具有可变宽度的 div，因此我无法在 PHP 中预测它的大小.如果有人输入了一个没有任何地方用空格分隔的长字符串，浏览器会拉伸页面，这很快就会变得很烦人.我曾尝试为此使用 wordwrap 函数，但我永远找不到合适的宽度，而且我遇到了输出问题.

I have a div which has a fluid width, thus I cannot predict its size in PHP. If someone enters a long string which isn't delimited by spaces anywhere, the browser will stretch the page, and that gets quite annoying rather quickly. I have tried to use the wordwrap function for this, but I can never find the proper width and I am having issues with output.

以下是我正在尝试的内容，基于 wordwrap 文档页面上留下的评论:

Here's what I am trying, based on a comment left on the documentation page for wordwrap:

<?php
//Using &#8203; here allows the browser to break the line of text, without the visual distraction. 
$line = wordwrap($line, 10, "&#8203;", true);
?>

评论继续解释它是如何成为零宽度空间字符的，它将告诉浏览器它可以自由中断但不显示.

The comment goes on to explain how it's a Zero Width Space character, which will tell the browser it is free to break but doesn't show up.

我相信你已经看到了出现的两个问题.它也会用零宽度空间替换普通空间，所以我最终得到如下内容:这是一个测试.你好，Stackoverflow！这应该会触发几次中断.

I'm sure you can already see the two problems which have arisen. It will replace normal spaces with that zero width space as well, so I wind up with things like: This is a​test.​Hello,​Stackoverf​low! This​ought to​trigger a​couple of​breaks.

我还为此编写了一个小的 bbcode 解析器，它也破坏了我的 html 输出，因为它切断了标签.

I also coded a small bbcode parser for this, and it also breaks my html output since it cuts the tags.

从好的方面来说，令人难以置信的长单词按预期被打破！

On the plus side, incredibly long words are broken as expected!

我尝试在 CSS 中的 div 上设置各种溢出属性，但没有一个能按预期运行.

I've tried setting various overflow properties on the div in CSS, but none of them function as expected.

推荐答案

有一个 CSS 属性:

There is a CSS property of:

word-wrap: break-word;

否则，如果您想保留此 PHP，理想情况下您只想对字符数大于 X 的单词应用中断，这将拆分空格上的字符串并对每个单词应用检查.您可能会遇到链接问题，但您可以轻松检查起始 url 字符或应用正则表达式.

Otherwise if you want to keep this PHP, Idealy you only want to apply a break on words with character counts greater than X, This will split the string on the space and apply a check to each word. You may run into problems with links, but you could easily check for starting url characters or apply a regex.

$text = 'this text is fine but waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaay long stuff gets broken waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaay  up into bits';

if($array = explode(' ',$text) and is_array($array))
{
  foreach($array as $key => $value)
  {
    if(strlen($value) > 10)
      $array[$key] =  wordwrap($value, 10, "­", true);
  }
  $text = implode(' ',$array);
}

echo $text;

在这个例子中，长度大于 10 的单词会被 ­ 包裹起来.字符，这是非常有用的，因为它会在休息时产生一个软连字符.如果您不希望使用额外的连字符，请将其替换为您的中断字符.您也可以尝试使用比破译前的最大长度更低的数字换行，IE strlen > 20, word wrap at 10

In this example words with a length greater than 10 are then word wrapped with the ­ character, which is pretty useful as it produces a soft hyphen on breaks. Replace it with your breaking character if you would perfer no additional hyphens. You can also try the word wrap with a lower number than the max length before breaking, IE strlen > 20, word wrap at 10

示例:http://i.imgur.com/fKINR.png

这篇关于如何使用自动换行或其他方式中断文本以适应流体宽度 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！