Je travaille sur un <div> qui est redimensionnable horizontalement et le texte à l'intérieur sera coupé en fonction de la largeur de son conteneur.
<div class="resizable_div">This is an example</div>
.resizable_div {
border: 1px solid red;
white-space: nowrap;
width: 100px;
height: 50px;
line-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
margin: 50px auto;
padding: 5px;
resize: horizontal;
cursor: col-resize;
min-width: 50px;
max-width: 150px;
} Vous pouvez voir que la boîte de div est redimensionnable horizontalement et que le texte est raccourci en utilisant le text-overflow etc. côté. Je ne veux pas de ce comportement. Au lieu de cela, je veux que le div soit redimensionné en allant uniquement dans le sens de la main droite et le côté gauche y reste. Comment y parvenir?
MISE À JOUR
Il y a un autre problème. Le div est redimensionnable uniquement par le coin inférieur droit et non avec une poignée de col-resize couleurs n'importe où sur la bordure droite. Comment le réparer?
5 Réponses :
ceci est dû à la margin:50px auto; cette propriété css. votre marge gauche et droite est automatique, donc elle fera centrer votre div vers son parent (car ici le parent est le corps). Ainsi, lorsque vous redimensionnez votre div, vous augmentez la largeur de votre div et définissez les valeurs de marge gauche et droite de manière égale en raison de sa valeur automatique.
si vous supprimez cette propriété, votre redimensionnement div fonctionne parfaitement comme vous le souhaitiez, mais votre boîte vient sur le côté gauche de votre corps et non au centre.
voir l'extrait suivant.
<div class="resizable_div">This is an example</div>
.resizable_div {
border:1px solid red;
white-space:nowrap;
width:100px;
height:50px;
line-height:50px;
overflow:hidden;
text-overflow:ellipsis;
/*margin:50px auto;*/
padding:5px;
resize:horizontal;
cursor:col-resize;
min-width:50px;
max-width:150px;
}Je viens d'ajouter un commentaire pour votre propriété margin css à la div
J'espère que cela dissipera votre confusion concernant ce problème.
Merci...
avez-vous trouvé votre solution à ce problème?
Veuillez supprimer le paramètre Auto de la marge et pour qu'il ne s'agrandisse que sur le côté droit, indiquez la direction ltr.
Par conséquent, votre CSS ressemblera à ceci:
<div class="resizable_div">This is an example</div>
.resizable_div {
border: 1px solid red;
white-space: nowrap;
width: 100px;
height: 50px;
line-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
margin: 50px;
padding: 5px;
resize: horizontal;
cursor: col-resize;
min-width: 50px;
max-width: 150px;
direction: ltr;
}
@ 6128530, j'ai fait ce que tu as dit. Cela ne peut donc pas fonctionner si nous utilisons l' auto en marge.
@ user5307298 Si vous utilisez auto, le div se développera des deux côtés et puisque vous voulez qu'il se développe uniquement sur la droite, vous devrez supprimer l'auto.
@Nazir a ajouté un extrait de code exécutable ...
essayez ceci, il suffit d'ajouter un autre div et le div mère contient une marge: 50px auto;
<div class="mother">
<div class="child">
<p>Let the user resize both the height and the width of this div element.</p>
<p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
</div>.mother {
padding: 20px;
resize: both;
width: 300px;
margin: 50px auto;
position: relative;
}
.child{
border: 2px solid;
padding: 20px;
resize: both;
overflow: hidden;
position: absolute;
left: 0;
}J'ai fait le débordement de la propriété css sur auto , donc cela fonctionne bien. Pour le deuxième problème: en utilisant la propriété de redimensionnement , le div sera toujours redimensionnable uniquement par le coin inférieur droit (horizontal / vertical / les deux) et il ne peut pas être redimensionné n'importe où sur la bordure droite.
<div class="resizable_div">This is an example</div>
.resizable_div {
border: 1px solid red;
white-space: nowrap;
width: 100px;
height: 50px;
line-height: 50px;
**overflow: auto;**
text-overflow: ellipsis;
margin: 50px auto;
padding: 5px;
resize: horizontal;
cursor: col-resize;
min-width: 50px;
max-width: 150px;
}Type redimensionner: les deux; pas redimensionner: horizontal.
OP a déclaré à plusieurs reprises que l'élément ne devrait être redimensionné qu'horizontalement. Même dans le titre.
j'ai fait des changements. S'il vous plaît laissez-moi savoir si des changements.
Si vous souhaitez redimensionner votre
divavec uneright-bordervous devez écrire duJavaScriptpour obtenir cette fonctionnalité.@ShubhamBaranwal mais comment faire en JS?
Vous pouvez utiliser JqueryUI redimensionnable ou parcourir cet article sur stackoverflow Redimensionner un div sur le glisser-déposer de la bordure sans ajouter de balisage supplémentaire . @ user5307298
@ShubhamBaranwal ok, je vais vérifier. Merci.
@ user5307298 Veuillez indiquer que la réponse que vous avez trouvée utile est correcte et / ou positive, Encouragement aide les utilisateurs à répondre à vos questions.
Il n'y a pas de bord redimensionnable. - Enfin, sauf si vous y ajoutez un peu de saveur JS.