如何调整缩进

Question

如何确保文本不超过灰色边框，并且没有滚动条？我认为问题是来自<td class="message">的宽度。

修改：底部边框已经是<td class="message">的边框，以显示其宽度。

这是小提琴：http://jsfiddle.net/eGVZx/3/

HTML

<div class="liste_posts">
  <table>
      <tr>
         <td class="message">
              <div class="topic_div"><p>Si vous êtes sur cette page, c'est parce que vous avez décidé de laisser tomber phpbb, ou autre, pour vous lancer dans l'aventure qu'est la création d'un forum. Et ça tombe bien, parce que justement, ici on va voir comment faire ça Smiley. Il faut, avant de commencer, que vous sachiez que je vais montrer comment réaliser une base que vous pourrez ensuite faire évoluer comme bon vous semblera.</p></div>
        </td>
     </tr>
  </table>
</div>

CSS

.message{
    background-color: rgb(244, 238, 250);
}

.topic_div p {
    word-break: break-all;
}

提前致谢。

Answer 1

如果要缩进第一行，请使用css text-indent。如果要缩进所有行，请使用padding-left进行左缩进。

就您的文字流出<td>而言，您需要向max-width或<td>添加div.topic_div或仅添加静态width

//// //// EDIT

http://jsfiddle.net/eGVZx/6/

Answer 2

我可能不理解你的要求;但是，这里的内容可能类似于您所寻找的内容：

http://jsfiddle.net/eGVZx/8/

.message{
    background-color: rgb(244, 238, 250);
}

.topic_div p {
    word-break: break-all;
    width: 80%;
    padding-right: 20%; 
}

这将允许“灰色”部分覆盖文本不是的其他20％。毋庸置疑，您可以根据需要调整百分比缩进，为文本区域和灰色区域创建足够的空间，这将占据顶部。

如有必要，请提供更多信息。 希望这会有所帮助。