Question

我有像

这样的文字

<div style="float:left; width: 250px"> PellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesquePellentesque  feugiat tempor elit. 
Ut mollis lacinia quam. Sed pharetra, augue aliquam   ornare vestibulum, metus massalaoreet tellus, eget iaculis lacus ipsum et diam. </div>

我不想要水平滚动。是否可以包装文本（自动换行）。我知道有一些IE特定的属性。

感谢您的时间。

更新：我也可以使用jQuery，Javascript，PHP来做到这一点。但怎么样？我的意思是字母（字体）不是固定宽度或任何你称之为。

Answer 1

我使用组合

word-wrap: break-word;
overflow: hidden;

处理这个问题。 word-wrap设置允许在支持该属性的浏览器中尽管其长度被包装，而overflow设置将导致它在浏览器的可用空间的末尾被切断不承认word-wrap。这就像你可能在不使用javascript的情况下获得的那样优雅。

Answer 2

根据http://www.w3.org/TR/css3-text/#word-break0

word-break: break-all;

...与自动换行（现在重命名为overflow-wrap）不同，因为即使是小词也可能在行尾时被打破。但它确实有效。

在极少数情况下，hyphen: auto;可能会为您带来更好的结果，但前提是您的长词包含在浏览器使用的词典中。

Answer 3

在扩展到Duroth的答案时，您可以使用以下php代码插入害羞连字符

$longest_length = 15;

$string_with_long_word = 'short lonngerrrrr lonnnnnnnggeeeeeeeeeeeeeeeeeessssssssssssssssstttttttttttttt and another looooooooooooonnnnnnnnngwwooooooooororoooorrrrrd';
$string = preg_replace_callback("/[a-z0-9]{{$longest_length},}/", 'putShyHyphen', $string_with_long_word);

function putShyHyphen($matches) {
 $string = $matches[0];
 $newstring = '';
 for ($i=0; $i<strlen($string); $i++) {
  $newstring .= $string[$i] . '&shy;';
 }

 return $newstring;
}
echo $string_with_long_word . '<hr />';
echo $string;

Answer 4

简单的css。试试这个：将您的文字放在< pre>...< /pre>

中

css rule

pre {
   overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
   white-space: pre-wrap; /* css-3 */
   white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
   white-space: -pre-wrap; /* Opera 4-6 */
   white-space: -o-pre-wrap; /* Opera 7 */
   /* width: 99%; */
   word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Answer 5

不幸的是，除非您对仅支持特定浏览器（IE7 / Win，Safari，Firefox 3.5）感到满意，否则您的问题没有纯CSS解决方案。

自动换行：break-word; 有效，但仅限于IE。

如果您能够改变文本，服务器端（PHP，ASP）或可能是客户端（Javascript），您可以编写一个插入“害羞连字符”的小功能（＆amp; shy ; ）进入你的文字。这样，可以在连字符的每个实例中分解文本，如果单词没有被分解，则不会显示害羞的连字符。

编辑，一个例子：

bla&shy;bla&shy;bla&shy;bla&shy;bla&shy;bla&shy;bla&shy;bla&shy;bla&shy; (etc)

将在您的浏览器中显示如下：

blablabla-
blablabla-
blabla

Answer 6

你必须使用JavaScript并使用这样的函数：

<script language="javascript">
function wrap() {
    var data = document.getElementsByTagName('yourtaghere'); 
    var  desiredLength = 40 ;
    var delimiter = "<br />";
    for( var i=0; i < data.length; ++i ) {
        cellLength=data[i].innerHTML.length
        if( desiredLength < cellLength ) {
            var counter=0;
            var output="";
            while( counter < cellLength ) {
                output += data[i].innerHTML.substr(counter,desiredLength) + delimiter;
                counter+= desiredLength;
            }
            data[i].innerHTML=output;
        }
    }
}
window.onload=wrap;
</script>

或者您可以使用hyphenator

Answer 7

一个新的答案，因为你已经改变了你的问题：

这是一个非常简单的PHP解决方案：

<?php
$string = "AnExtremelyLongStringWithoutWhitespacesOrBreakpointsOfAnyKindThatWillCompletelyAndUtterlyRuinYourWebsiteDesign";
for($i=0; $i<strlen($string); $i++) {
  $newString .= $string[$i] . '&shy;';
}
echo $newString;

任何语言都可以达到同样的效果。

Answer 8

由于word-wrap: break-word在宽度未修复时效果不佳（甚至在<table>中更少），因此Stack Exchange会添加一些不可见的Unicode标记，浏览器会使用这些标记来查找换行符的可能位置。但是：当访问者复制文本时，那些隐形标记仍然存在，这可能是坏事。有关Meta的更多详细信息，请参见https://meta.stackexchange.com/questions/170970/occasionally-the-unicode-character-sequence-u200c-u200b-zwnj-zwsp-is-insert/。

在复制结果文本时，每隔几个字符插入<span style="display: inline-block"></span>似乎不，而不是Unicode魔术。这适用于我在Chrome 25，Firefox 19，Safari 6，Internet Explorer 9（在Mac上的Parallels上的Windows 7中;模拟IE8和IE7也适用），Android 4.1上的股票浏览器和Chrome以及iOS 6.1.2上的Safari ，是probably also supported in Opera。请参阅this JS Bin example。

有一天，<wbr>将成为解决方案，但not today：虽然IE7支持它，但IE8和IE9不支持。

Answer 9

建议的标签可以打破很长的单词（或URL）但是你会得到从浏览器到浏览器的混合结果，试图在窄div中传递文本。例如200px div：

<div style="font-size:12px;font-family:monospace;width:200px;word-break:break-all;word-wrap:break-word;">1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890</div>

在Chrome中数字中断，在Firefox中他们没有 - 你会得到两列数字！似乎Firefox没有考虑前一行“长”字有多少可用空间 - 它并没有抓住每个机会。如果这种行为得到纠正，我希望Firefox也会考虑这会如何影响文本对齐。

“害羞”标签有助于Firefox，但你仍然会得到“粗糙”的文字。我还没有做过大量的测试，但是当在Firefox中使用短文字（少于8个字符）时，看起来害羞的标签会产生不可预测的结果（div会丢失它们的风格）。我个人更喜欢Chrome更积极的休息时间！

在CSS中包装长文本

9 个答案: