css - 在每个新行上从右侧自动缩进文本

Question

jsfiddle

<div class='outer'>
<a href="javascript:void(0)" onclick='ShowSmiley();' class='emojie'>
<img src="images/smiley.png" height="20px" width="20px"></a>
<div class="emoji-menu" id="emojiMenu" style="display:none;" >
  </div>
 <div contenteditable="true" id='MsgToSend' onkeypress='ClientOnTyping(event);'class='msgtosend'></div>
  <style>
  .msgtosend /* The message to send div */
  {
display:block;
border:1px solid Gray;

height:100px;
width:270px;
max-width:270px;          
overflow:auto;
word-wrap:break-word;

}
 .outer
{
position: relative;
width: 100%;
}
 .outer .emojie
{

padding-top: 0;
position: absolute;
top: 0;
right: 0;
border:none;
}
</style>

我应该如何让我的可编辑 div 在每次插入新行时从右侧自动缩进？比方说 20 px

Answer 1

我可能不完全理解你的问题，但如果你想正确对齐你的文本，你可以使用 text-align 属性和 padding-right 将确保它与右边的距离

div
{
    background-color:Red;
    padding-right:20px;
    text-align:right;
}

看看JS Fiddle

编辑 ：

如果要从右到左插入文本，请使用方向属性

 direction:rtl;

这是更新的代码Update JS Fiddle