html - 如何调整身份

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。

////编辑////

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%。不用说，您可以根据需要调整缩进百分比，以为文本区域和灰色区域留出足够的空间，它们会位于顶部。

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