CSS/HTML - Tranzaktsiya <input type = "submit" qiymati uchun qo'llanilishi mumkinmi?

Pochta ma'lumotlarini jo'natish uchun ariza sifatida foydalanmoqdaman, chunki mening ishimda boshqa imkoniyatni ko'rmayapman.

Shak-shubhasiz, matnni havolaga o'xshatish uchun tugmachani tarjima qila olaman, lekin tirelenmok yoki matn terish parametrlari qo'llanilmaydi. Ba'zi Submitbutton ning qiymatli matn atrofdagi div konteyneridan uzunroqdir, shuning uchun men yo'riqnoma kerak.

Hatto muayyan kirish elementlarini id yoki sinfga berishga harakat qildim, ammo CSS bilan hech qanday ta'siri yo'q.

Har qanday fikr bormi?

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#box_link
{
width: 100px;
height: 100px;
background-color: lime;
}

#box_link input[type=submit]
{
  background-color: white;
  margin: 0;
  padding: 0;
  border: 0;

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

#hyphbutton
{
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

#box_link input[type=submit]:hover
{
  color: red;
}
<div id="box_link">

<form action="alarmierungssoftware/anwendungsbeispiele" method="POST">
<input type="hidden" name="param" value="stiller_alarm" />
<input type="submit" id="hyphbutton" value="Stiller Alarm/Hilferuf" />
</form>

</div>
</div> </div>
0
"Aytganimdek, har qanday defis yoki so'z break parametri qo'llanilmaydi." - Siz taqdim qilgan kodda hech qanday ma'lumot yo'q. Hech qanday HTML mavjud emas. Minimal, to'liq va tasdiqlanishi mumkin misol bilan ta'minlash
qo'shib qo'ydi muallif Quentin, manba
"Ba'zi tanlov tugmasining qiymati matn atrofdagi div konteyneridan uzoqroq" - sizning namunangiz kodi div yo'q ... va juda qisqa yorlig'i bor. Minimal, to'liq va tasdiqlanadigan misol ni jonli demo
qo'shib qo'ydi muallif Quentin, manba
kodni qisqartirishni o'z ichiga olgan yana bir marta tahrirlangan
qo'shib qo'ydi muallif Toni Latenz, manba
kodni qisqartirishni o'z ichiga olgan yana bir marta tahrirlangan
qo'shib qo'ydi muallif Toni Latenz, manba

6 javoblar

Use a <button> element instead of an <input>. There's no need for hyphenation rules: You have no particually long words, the text can wrap on the spaces.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#box_link
{
width: 100px;
height: 100px;
background-color: lime;
}

#box_link [type=submit]
{
  background-color: white;
  margin: 0;
  padding: 0;
  border: 0;
}

#box_link [type=submit]:hover
{
  color: red;
}
<div id="box_link">

<form action="alarmierungssoftware/anwendungsbeispiele" method="POST">
<input type="hidden" name="param" value="stiller_alarm" />
<button type="submit" id="hyphbutton" value="Stiller Alarm/Hilferuf">Stiller Alarm/Hilferuf</button>
</form>

</div>
</div> </div>
2
qo'shib qo'ydi
<input> aslida white-space: normal ni o'rnatganingizda ham ishlaydi; Mening javobimga qarang.
qo'shib qo'ydi muallif Mr Lister, manba
Rahmat @Quentin! Ishlar mukammal. Kod parchalarini ishlatish uchun minnatdorman, kelajakdagi postlarda buni amalga oshiradi.
qo'shib qo'ydi muallif Toni Latenz, manba

Use a <button> element instead of an <input>. There's no need for hyphenation rules: You have no particually long words, the text can wrap on the spaces.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#box_link
{
width: 100px;
height: 100px;
background-color: lime;
}

#box_link [type=submit]
{
  background-color: white;
  margin: 0;
  padding: 0;
  border: 0;
}

#box_link [type=submit]:hover
{
  color: red;
}
<div id="box_link">

<form action="alarmierungssoftware/anwendungsbeispiele" method="POST">
<input type="hidden" name="param" value="stiller_alarm" />
<button type="submit" id="hyphbutton" value="Stiller Alarm/Hilferuf">Stiller Alarm/Hilferuf</button>
</form>

</div>
</div> </div>
2
qo'shib qo'ydi
<input> aslida white-space: normal ni o'rnatganingizda ham ishlaydi; Mening javobimga qarang.
qo'shib qo'ydi muallif Mr Lister, manba
Rahmat @Quentin! Ishlar mukammal. Kod parchalarini ishlatish uchun minnatdorman, kelajakdagi postlarda buni amalga oshiradi.
qo'shib qo'ydi muallif Toni Latenz, manba

buni sinab ko'ring

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#box_link
{
width: 100px;
height: 100px;
background-color: lime;
}

#box_link input[type=submit]
{
  background-color: transparent;
  margin: 0;
  padding: 0;
  border: 0;

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
   word-wrap:break-word;

}

#hyphbutton
{
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-wrap:break-word;
}

#box_link input[type=submit]:hover
{
  color: red;
}
<div id="box_link">

<form action="alarmierungssoftware/anwendungsbeispiele" method="POST">
<input type="hidden" name="param" value="stiller_alarm" />
<input type="submit" id="hyphbutton" value="Stiller Alarm/Hilferuf" />
</form>

</div>
</div> </div>
1
qo'shib qo'ydi
Pls sizning savolingizni yaxshilaydi. Agar muammoingiz chiziq bo'lsa, u allaqachon hal qilmoqdadir deb o'ylayman
qo'shib qo'ydi muallif Antonio Canillas, manba

buni sinab ko'ring

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#box_link
{
width: 100px;
height: 100px;
background-color: lime;
}

#box_link input[type=submit]
{
  background-color: transparent;
  margin: 0;
  padding: 0;
  border: 0;

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
   word-wrap:break-word;

}

#hyphbutton
{
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-wrap:break-word;
}

#box_link input[type=submit]:hover
{
  color: red;
}
<div id="box_link">

<form action="alarmierungssoftware/anwendungsbeispiele" method="POST">
<input type="hidden" name="param" value="stiller_alarm" />
<input type="submit" id="hyphbutton" value="Stiller Alarm/Hilferuf" />
</form>

</div>
</div> </div>
1
qo'shib qo'ydi
Pls sizning savolingizni yaxshilaydi. Agar muammoingiz chiziq bo'lsa, u allaqachon hal qilmoqdadir deb o'ylayman
qo'shib qo'ydi muallif Antonio Canillas, manba

Buning uchun avvalo white-space: normal; tugmachasini qo'shish kerak. aks holda u hech qachon yopishmaydi Va word-break: break-all; dan qutulish juda ko'p narsalarni o'radi.

Avtomatik shablonlarni avtomatik tartibga keltirish uchun brauzer qaysi til haqida gapirayotganini bilishi juda muhim, shuning uchun qaysi kassa qoidalarini ishlatishni hal qilish mumkin. Avtomatik tireleme faqat Chrome'da emas, balki Mozilla va IE da ishlaydi.

Oh, va mening manbamdagi tasvirni hech qachon unutmang.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#box_link input[type=submit]
{
  background-color: white;
  margin: 0;
  padding: 0;
  white-space: normal;
}

#box_link input[type=submit]:hover
{
  color: red;
}

#box_link input[type=submit]
{
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
 }
<div id="box_link" lang="de-DE">
  <table>
    <tr>
     <td>Stiller Alarm/Hilferuf</td>
     <td>
        <form action="alarmierungssoftware/anwendungsbeispiele" method="POST">
          <input type="hidden" name="param" value="stiller_alarm" />
          <input type="submit" id="hyphbutton" value="Stiller Alarm/Hilferuf" />
        </form>
     </td>
    </tr>
   </table>
</div>
</div> </div>
0
qo'shib qo'ydi

Buning uchun avvalo white-space: normal; tugmachasini qo'shish kerak. aks holda u hech qachon yopishmaydi Va word-break: break-all; dan qutulish juda ko'p narsalarni o'radi.

Avtomatik shablonlarni avtomatik tartibga keltirish uchun brauzer qaysi til haqida gapirayotganini bilishi juda muhim, shuning uchun qaysi kassa qoidalarini ishlatishni hal qilish mumkin. Avtomatik tireleme faqat Chrome'da emas, balki Mozilla va IE da ishlaydi.

Oh, va mening manbamdagi tasvirni hech qachon unutmang.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#box_link input[type=submit]
{
  background-color: white;
  margin: 0;
  padding: 0;
  white-space: normal;
}

#box_link input[type=submit]:hover
{
  color: red;
}

#box_link input[type=submit]
{
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
 }
<div id="box_link" lang="de-DE">
  <table>
    <tr>
     <td>Stiller Alarm/Hilferuf</td>
     <td>
        <form action="alarmierungssoftware/anwendungsbeispiele" method="POST">
          <input type="hidden" name="param" value="stiller_alarm" />
          <input type="submit" id="hyphbutton" value="Stiller Alarm/Hilferuf" />
        </form>
     </td>
    </tr>
   </table>
</div>
</div> </div>
0
qo'shib qo'ydi