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

每个新行的右侧自动缩进文本

1 个答案: