fractionner le texte dans la ligne suivante si le contenu dépasse la largeur fixe pour tableau html à l'aide de JavaScript
J'ai un div, qui se compose de tableau avec différents styles appliqués td.
Je suis en train de mettre en œuvre un modèle, si le texte dépasse la largeur de la table de td, il faut aller à la ligne suivante.
Mais je ne peux pas faire cela. Mon code est
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML Div Overflow scrollbars</title>
<style type="text/css">
.mainDiv {
height: 230px;
width: 600px;
overflow: scroll;
}
.divScroll-1 {
width: 70%;
white-space:nowrap;
overflow-y: scroll;
}
.divScroll-2 {
width: 30%;
float:right;
white-space:nowrap;
}
</style>
<script>
function getText() {
var str = document.getElementById("no").value;
var div = document.getElementById("divScroll-1");
var ss = document.getElementById("div33");
var textarea = document.getElementById("mainDiv");
if (div.innerHTML == "" ) {
div.innerHTML += str ;
} else {
div.innerHTML += "</br>" + str ;
}
if(ss.innerHTML == ""){
ss.innerHTML = "Time" ;
}else{
ss.innerHTML += "</br>"+"Time";
}
}
</script>
</head>
<body>
<h3>Vertical Overflow Scroll</h3>
<table align="center" width="100%" border=1>
<tr>
<td>
<div class="mainDiv" id="mainDiv">
<table width="100%" align="left" style="table-layout:fixed">
<tr>
<td height="200px" style="max-width:150px;" valign="top" class="divScroll-1" id="divScroll-1">
</td>
<td valign="top" class="divScroll-2" id="div33">
</td>
</tr>
</table>
</div>
</td></tr>
<tr>
<td>
<input type="text" id="no" size="20" />
<input type="button" onclick="getText()" value="Insert Text" />
</td></tr></table>
</body>
</html>
Je suis ajoutant le texte dans la table à l'aide de Javascript. Si j'insère un long texte plus grand que la largeur de la td, le reste du texte sera caché.
J'ai besoin de le contenu restant dans la ligne suivante.
Veuillez donner des suggestions, ou de corriger mon code.
OriginalL'auteur Human Being | 2013-01-03
Vous devez vous connecter pour publier un commentaire.
Essayer ce, déjà sur stackoverflow
CSS: Comment puis-je renvoyer le texte avec pas d'espace à l'intérieur d'un <td>?
mise à jour de votre classe css comme suit ("divScroll-1")
OriginalL'auteur ahmadkwench
supprimer
white-space: nowrap;
dans votre css.veuillez consulter codepen.io/madevelopers/stylo/kgoBl
Merci pour votre réponse.Mais j'ai besoin de le texte doit être dans la ligne suivante si elle dépasse la largeur de la première <td>.
OriginalL'auteur Mark Dee