< p为H.当文本超出宽度时，继续换行 [英] <p> when text exceeds width, continue in new line

问题描述

我有以下结构：

 < ul> 
< li> 
< p style =width：10px;> 
文本转到这里
< / p> 
< / li> 
< li> 
< p style =width：10px;> 
文本转到这里
< / p> 
< / li> 
< / ul> 
  

当p的文本超过10px的限制时，我希望它在新行中继续。 。 我怎么做？谢谢 >已经是一个块元素），如果你想打破单词，那么你可以尝试：

  p.letters {
单词包装：分词; 
 
 $ / code> 

以下是一个基本的工作示例： http://jsfiddle.net/G9z5M/ （见下面更新）。

你可以玩使用各种技术：

  / *正常包装，空白* / 
 p.words {
自动换行：正常; 
} 
 
 / *隐藏非包装字母* / 
 p.hidden {
 overflow：hidden; 
} 
 
 / *输出一行，根本不换行* / 
 p.nowrap {
 white-space：nowrap; 
} 
  

查看更新的小提琴： http://jsfiddle.net/G9z5M/1/

I have the following structure:

<ul>
<li>
<p style="width:10px;">
Text goes here
</p>
</li>
<li>
<p style="width:10px;">
Text goes here
</p>
</li>
</ul>

When the text of the p exceeds the 10px limit I would like it to continue in a new row.. How do i do that? Thanks

解决方案

Your example already word-wraps (because<p> is already a block element), if you want to break words, then you could try:

p.letters {
    word-wrap: break-word;
}

Here's a basic working example: http://jsfiddle.net/G9z5M/ (see updates below).

You can play around with it using various techniques:

/* Wraps normally, on whitespace */
p.words {
    word-wrap: normal;
}    

/* Hides non-wrapped letters */
p.hidden {
    overflow: hidden;
}

/* Outputs a single line, doesn't wrap at all */
p.nowrap {
    white-space: nowrap;
}​

See updated fiddle: http://jsfiddle.net/G9z5M/1/

这篇关于< p为H.当文本超出宽度时，继续换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！