Dont erlauben eine Taste ohne Wort zu brechen

Angenommen, Sie haben einen Hilfetext mit einem Knopf haben wie:Dont erlauben eine Taste ohne Wort zu brechen

<label>This is a short help text <button>(?)</button></label>

Wenn Sie die Fenstergröße schrumpfen, irgendwann ein Zeilenumbruch geschieht, und die Taste ? ist allein in der zweiten Zeile.

This is a short help text 
(?)

So sagte der UX-Team, die (?) Taste should't allein in zweiter Linie, anstatt das letzte Wort und Taste sein.

This is a short help 
text (?)

Kann jemand es mit normalem CSS lösen?

Da wir React verwenden, schlug ich vor, den Satz zu brechen und einen nicht brechbaren Teil aus dem letzten Wort und der Schaltfläche zu erstellen, aber es fühlt sich an wie ein hässlicher Hack, also suchen wir nach einer sauberen CSS-Lösung wenn möglich.

UPDATE: Bereits hier eine Lösung gefunden:

How can I use a non-breaking space before an inline-block-default element, such as a <button>?

Quelle

2017-07-11 webdeb

nicht sicher, aber ich denke, wenn man würde 'auf' a' button' ändern, sollten Sie in der Lage sein 'white-space zu verwenden: nowrap;' . – domsson

Ist der Text dynamisch? Können Sie das Markup ändern? https://codepen.io/danield770/pen/ZymdMr – Danield

Ja der Text ist dynamisch – webdeb

fand schließlich die Antwort hier:

How can I use a non-breaking space before an inline-block-default element, such as a <button>?

ich den Knopf in einer Spanne zu wickeln hatte, den Browser denkt, seinen immer noch Text zu machen und white-space: nowrap; den Wickelraum hinzuzufügen.

Der vollständige Markup:

button { 
    display: inline; 
} 
span { 
    white-space: nowrap; 
} 
<label>This is a short text<span>&nbsp;<button>(?)</button></span><label>

Quelle

2017-07-11 10:51:41 webdeb

<body> 
<label>This is a short help text <button>(?)</button></label> 
</body> 
<style> 
label{ 
display:inline-block; 
width:150px; 
word-wrap:break-word; 
} 
</style>

Schränkungsweite für die Sorge div oder jeden Tag und word-wrap verwenden: break-word;

Quelle

2017-07-11 10:14:49 Mgkrish

danke, aber es funktioniert nicht – webdeb

überprüfen Sie den aktualisierten Code seine Arbeit .... Anzeige hinzufügen: Inline-Block mit Code ...... es funktioniert hier ist der Code-Link https://codepen.io/mgkrish/pen/rwQEvd – Mgkrish

Es bricht mit dem Wort nur wegen der festen '140px'. Versuchen Sie, die Breite auf etwas Dynamisches wie '30%' zu ändern und ändern Sie die Fenstergröße, es wird zwischen dem Text und der Schaltfläche unterbrochen. – webdeb

Sehen Sie, wenn Sie eine <span> um das letzte Wort setzen können + die Taste, und stellen Sie die <span> zu { display: inline-block; }.

Demo:

div { 
 
    border: dotted 1px black; 
 
    margin-bottom: 3px; 
 
} 
 

 
label>span { 
 
    display: inline-block; 
 
}

<div style="width:160px"> 
 
    <label>This is a short help <span>text <button>(?)</button></span></label> 
 
</div> 
 
<div style="width:170px"> 
 
    <label>This is a short help <span>text <button>(?)</button></span></label> 
 
</div> 
 
<div style="width:180px"> 
 
    <label>This is a short help <span>text <button>(?)</button></span></label> 
 
</div> 
 
<div style="width:190px"> 
 
    <label>This is a short help <span>text <button>(?)</button></span></label> 
 
</div> 
 
<div style="width:200px"> 
 
    <label>This is a short help <span>text <button>(?)</button></span></label> 
 
</div>

Quelle

2017-07-11 10:58:02

nice hack, Hinzufügen von 'span' und' display: Inline-Block; ' – bhv

Wie ich im ursprünglichen Beitrag sagte, ist der Etikettentext dynamisch, ich werde nicht den Satz teilen, aber wenn Sie aktualisieren Sie mit der Antwort Technik aus meiner eigenen Antwort Ich akzeptiere es, danke – webdeb

Nein, es ist auf diese Weise in Ordnung, so dass jeder sehen kann, welche Ansätze es gibt, und ich würde sogar empfehlen, Ihre eigene Antwort zu akzeptieren, da dies Ihre bevorzugte Lösung ist. –

Dont erlauben eine Taste ohne Wort zu brechen

Antwort

Verwandte Themen