Div и textarea: неодинаковое распределение символов при одинаковых padding

Боков Глеб

То, что Вы видите на рисунке - прозрачная textarea, но под ней лежит белый div, куда посредством JavaScript копируется содержимое из textarea. Символы в textarea имеют полупрозрачный желтый, в div - чёрный, и при точном наложении получается тот цвет, который Вы видите. Хотя оба элемента имеют одинаковые настройки padding, как видно, получается не всё совсем одинаково:

$container = $('#container');
$textarea = $('#textarea');
$underlay = $('#underlay');

updateProjection();

$textarea.on('*****', function(){
	updateProjection();
});

function updateProjection(){

	var textareaContains = $textarea.val();
  textareaContains = '<p>'+textareaContains.replace(/\n\s*\n/g,'</p><p>')+'</p>'; 
  textareaContains = textareaContains.replace(/\n{1}/g,''); 
	$underlay.html(textareaContains);
  
  var textareaContainsHeight = $textarea[0].scrollHeight;
  
  $textarea.outerHeight(textareaContainsHeight);
  $underlay.outerHeight(textareaContainsHeight);
  $container.height($underlay.outerHeight());

}
*{
  box-sizing: border-box;
}

body{
  width: 300px;
}

#container{
  background-color: #d6ebf5;
  position: relative;
  padding: 5px 10px;
}

#textarea, #underlay{
    font-family: Arial, sans-serif;
    font-size: 13px;
    position: absolute;
    top: 5px;
    left: 10px;
    padding: 4px 8px;
    overflow-y: hidden;
    width: -webkit-calc(100% - 20px);
    width: calc(100% - 20px);
    height: 70px; // начальная
}

#textarea {
    font-size: 13px;
    outline: none;
    padding: 4px 8px;
    border: none;
    border-radius: 2px;
    resize: none;
    color: rgba(255, 165, 0, 0.5); 
    background-color: transparent;
    z-index: 2;
    caret-color: black;
}

#underlay{
    overflow-x: hidden;
    color: #555555;
    background: #FFFFFF;
    border-radius: 2px;
    z-index: 1;
    line-height: normal;
}

#underlay>p{
  margin: 0;
}

#underlay>p:not(:last-child){
  padding-bottom: 15px;
}
<div id="container">
  
  <textarea id="textarea">Бегом марш! У месторождения кварцующихся фей без слёз хочется электрическую пыль.
  
Съел бы ёж лимонный пьезокварц, где электрическая юла яшму с туфом похищает.ddddddddddddddddddddddddddddddddddddddddddddddddddddddfdfdfdfdfdffdfdfdfdfdfdfd</textarea>
</div>

Этот же пример на JSFiddle.

1 ответ

Боков Глеб

Длинное слово в блоке не переносится на вторую строку. Если бы блоку не было задано overflow-x: hidden;, у него появилась бы горизонтальная прокрутка, и это стало бы заметнее.

Добавьте диву word-wrap: break-word;:

Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область.

$container = $('#container');
$textarea = $('#textarea');
$underlay = $('#underlay');

updateProjection();

$textarea.on('*****', function(){
	updateProjection();
});

function updateProjection(){

	var textareaContains = $textarea.val();
  textareaContains = '<p>'+textareaContains.replace(/\n\s*\n/g,'</p><p>')+'</p>'; 
  textareaContains = textareaContains.replace(/\n{1}/g,''); 
	$underlay.html(textareaContains);
  
  var textareaContainsHeight = $textarea[0].scrollHeight;
  
  $textarea.outerHeight(textareaContainsHeight);
  $underlay.outerHeight(textareaContainsHeight);
  $container.height($underlay.outerHeight());

}
*{
  box-sizing: border-box;
}

body{
  width: 300px;
}

#container{
  background-color: #d6ebf5;
  position: relative;
  padding: 5px 10px;
}

#textarea, #underlay{
    font-family: Arial, sans-serif;
    font-size: 13px;
    position: absolute;
    top: 5px;
    left: 10px;
    padding: 4px 8px;
    overflow-y: hidden;
    width: -webkit-calc(100% - 20px);
    width: calc(100% - 20px);
    height: 70px; // начальная
}

#textarea {
    font-size: 13px;
    outline: none;
    padding: 4px 8px;
    border: none;
    border-radius: 2px;
    resize: none;
    color: rgba(255, 165, 0, 0.5); 
    background-color: transparent;
    z-index: 2;
    caret-color: black;
}

#underlay{
    overflow-x: hidden;
    color: #555555;
    background: #FFFFFF;
    border-radius: 2px;
    z-index: 1;
    line-height: normal;
    word-wrap: break-word; /* добавил свойство */
}

#underlay>p{
  margin: 0;
}

#underlay>p:not(:last-child){
  padding-bottom: 15px;
}
<div id="container">
  
  <textarea id="textarea">Бегом марш! У месторождения кварцующихся фей без слёз хочется электрическую пыль.
  
Съел бы ёж лимонный пьезокварц, где электрическая юла яшму с туфом похищает.ddddddddddddddddddddddddddddddddddddddddddddddddddddddfdfdfdfdfdffdfdfdfdfdfdfd</textarea>
</div>

licensed under cc by-sa 3.0 with attribution.