Dla porządku podam "regułkę" :
Syntax
<textarea wrap="soft|hard">
Attribute Values
Value |
Description |
soft |
The text in the textarea is not wrapped when submitted in a form. This is default |
hard |
The text in the textarea is wrapped (contains newlines) when submitted in a form. When "hard" is used, the cols attribute must be specified |
Mam nadzieję, że ten "prosty" skrypt w php posłuży za najlepszy sposób wytłumaczenia. lub w javascript (CodePen)
test_textarea_wrap_attrib.php http://localhost/test_textarea_wrap_attrib.php
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$wrap_soft = $_REQUEST['wrap-soft-area'];
$wrap_hard = $_REQUEST['wrap-hard-area'];
$wrap_hard_area_point = $_REQUEST['wrap-hard-area-point'];
} else {
$wrap_soft = "";
$wrap_hard = "";
$wrap_hard_area_point = "20";
}
?>
<style>
#wrap-hard-area-point-label { color: red; }
</style>
<label for="wrap-soft">Soft wrap for $_POST['wrap-soft-area']</label>
<pre id="wrap-soft"><?php echo $wrap_soft; ?></pre>
<br>
<label for="wrap-hard">Hard wrap for $_POST['wrap-hard-area'] with <b>cols</b> attrib set on <?php echo $wrap_hard_area_point; ?></label>
<pre id="wrap-hard"><?php echo $wrap_hard; ?></pre>
<br>
<form method="post" action="test_textarea_wrap_attrib.php">
<label for="wrap-soft-area">Soft wrap</label><br>
<textarea id="wrap-soft-area" name="wrap-soft-area" wrap="soft">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse imperdiet ut massa a consequat. Praesent eget venenatis nulla.
</textarea>
<br><br>
<label for="wrap-hard-area">Hard wrap <textarea wrap="hard" cols="<span id="wrap-hard-area-point-label"><?php echo $wrap_hard_area_point; ?></span>"></label><br>
<textarea id="wrap-hard-area" name="wrap-hard-area" wrap="hard" cols="<?php echo $wrap_hard_area_point; ?>">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse imperdiet ut massa a consequat. Praesent eget venenatis nulla.
</textarea>
<br><br>
<label for="wrap-hard-area-point">Hard wrap point (cols) : </label>
<input id="wrap-hard-area-point" name="wrap-hard-area-point" value="">
<br><br>
<button type="submit">Enter</button>
</form>
<script>
const wrap_hard_area = document.getElementById("wrap-hard-area");
const wrap_hard_area_point_label = document.getElementById("wrap-hard-area-point-label");
const wrap_hard_area_point = document.getElementById("wrap-hard-area-point");
let wrap_hard_area_mouse_down = false;
wrap_hard_area_point.value = wrap_hard_area.cols;
wrap_hard_area.addEventListener("mousemove", () => {
if (wrap_hard_area_mouse_down) {
const width_css = getComputedStyle(wrap_hard_area).width.replace("px","");
const width_to_cols = (width_css / 10 < 2) ? '1': width_css / 10;
wrap_hard_area_point.value = Math.floor(width_to_cols);
wrap_hard_area.setAttribute("cols",wrap_hard_area_point.value);
wrap_hard_area_point_label.textContent = wrap_hard_area_point.value;
}
});
wrap_hard_area.addEventListener("mousedown", () => {
wrap_hard_area_mouse_down = true;
});
wrap_hard_area.addEventListener("mouseup", () => {
wrap_hard_area_mouse_down = false;
});
wrap_hard_area_point.addEventListener("input", () => {
wrap_hard_area.cols = wrap_hard_area_point.value;
wrap_hard_area_point_label.textContent = wrap_hard_area_point.value;
});
</script>
Zmieniając wartość cols i po kliknięciu Enter zobaczysz wynik.
P.S. Ustaw tak cols ...