Cara Menambahkan Garis Bawah Bertitik Di Bawah Teks HTML

97

Bagaimana Anda menggarisbawahi teks html sehingga garis di bawah teks tersebut bertitik daripada garis bawah standar? Lebih disukai, saya ingin melakukan ini tanpa menggunakan file CSS terpisah. Saya seorang pemula di html.

html underline parap
sumber
13
Mengapa mengapa Anda tidak dapat menggunakan CSS? Mungkin membuat halaman sebagai satu gambar dan menambahkan baris dengan mspaint?
epascarello
Saya tidak berpikir itu bisa dilakukan tanpa CSS
Cfreak
Anda harus menggunakan css, tetapi itu bisa dilakukan dengan menggunakan gambar latar belakang, batas bawah adalah pendekatan terbaik
kingdomcreation
4
Teman-teman. Saya pikir dia berkata "tanpa menggunakan file CSS terpisah", bukan "tanpa CSS". Sembah para pemula.
Stefan Reich

Jawaban:

138

Tidak mungkin tanpa CSS. Faktanya, <u>tag hanya menambahkan text-decoration:underlineteks dengan CSS bawaan browser.

Inilah yang dapat Anda lakukan:

<html>
<head>
<!-- Other head stuff here, like title or meta -->

<style type="text/css">
u {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>
Alfred Xing
sumber
Di <head>elemen Anda , tambahkan <style>tag (saya telah mengedit jawaban saya)
Alfred Xing
2
Anda juga dapat mencoba dottedbukannyadashed
Brian Luka bakar
Solusi bagus dan itu mungkin. Jangan buat saya kode js untuk itu;)
Ahmet Can Güven
Inilah jawabannya dengan dukungan teks multi baris stackoverflow.com/a/4365458/1078641
electroid
40

Gunakan kode CSS berikut ...

text-decoration:underline;
text-decoration-style: dotted;
Shakeel Ahmed
sumber
3
Ini harus menjadi jawaban yang diterima. Mengikuti model kotak, menggunakan titik-titik borderakan ditempatkan di luar paddingdan dengan demikian akan jauh dari teks.
Ryan Walker
3
Ada sintaks singkat: di text-decoration: underline #000 dotted;mana atribut pertama adalah garis, kedua adalah warna dan yang ketiga adalah gaya.
Sos Sargsyan
Terima kasih Sos untuk peningkatannya
Shakeel Ahmed
15

Tanpa CSS, pada dasarnya Anda terjebak dengan menggunakan tag gambar. Pada dasarnya buatlah gambar teks dan tambahkan garis bawah. Itu pada dasarnya berarti halaman Anda tidak berguna bagi pembaca layar.

Dengan CSS, itu sederhana.

HTML:

<u class="dotted">I like cheese</u>

CSS:

u.dotted{
  border-bottom: 1px dashed #999;
  text-decoration: none; 
}

Menjalankan Contoh

Halaman contoh

<!DOCTYPE HTML>
<html>
<head>
    <style>
        u.dotted{
          border-bottom: 1px dashed #999;
          text-decoration: none; 
        }
    </style>
</head>
<body>
    <u class="dotted">I like cheese</u>
</body>
</html>
epascarello.dll
sumber
10

Elemen HTML5 dapat memberikan garis bawah putus-putus sehingga teks di bawahnya akan memiliki garis putus-putus daripada garis bawah biasa. Dan atribut title [judul] membuat tip alat untuk pengguna saat mereka mengarahkan kursor ke elemen:

CATATAN: Batas titik-titik / garis bawah ditampilkan secara default di Firefox dan Opera, tetapi IE8, Safari, dan Chrome membutuhkan baris CSS:

<abbr title="Hyper Text Markup Language">HTML</abbr>
Fatima Waheed
sumber
Ini jawaban yang benar. Pendek dan bebas CSS. Terima kasih.
Saeed Ahadian
Dengan HTML5 ini seharusnya menjadi jawaban yang diterima.
perry
4

Jika konten memiliki lebih dari 1 baris, menambahkan batas bawah tidak akan membantu. Dalam hal ini Anda harus menggunakan,

text-decoration: underline;
text-decoration-style: dotted;

Jika Anda ingin lebih banyak ruang bernapas di antara teks dan baris, cukup gunakan,

text-underline-position: under;
Darshana Gunawardana
sumber
3

Format ulang jawaban oleh @epascarello :

u.dotted {
  border-bottom: 1px dashed #999;
  text-decoration: none;
}
<!DOCTYPE html>
<u class="dotted">I like cheese</u>
Luaskan cuplikan

anatoly techtonik
sumber
0

Anda dapat menggunakan batas bawah dengan dottedopsi.

border-bottom: 1px dotted #807f80;
Neel
sumber
0

Anda dapat mencoba metode ini:

<h2 style="text-decoration: underline; text-underline-position: under; text-decoration-style: dotted">Hello World!</h2>

Harap dicatat bahwa tanpa text-underline-position: under;Anda masih akan memiliki garis putus-putus tetapi properti ini akan memberinya lebih banyak ruang bernapas.

Ini dengan asumsi Anda ingin menyematkan semua yang ada di dalam file HTML menggunakan gaya sebaris dan tidak menggunakan file atau tag CSS terpisah.

Mona Jalal
sumber
-2

Bukan tidak mungkin tanpa CSS. Misalnya sebagai item daftar:

<li style="border-bottom: 1px dashed"><!--content --></li>
Davington III
sumber
6
Tidak mungkin tanpa CSS. The styleAtribut hanyalah sebuah cara menerapkan sifat CSS langsung ke elemen. Lihat dokumen MDN tentang atribut gaya.
mirichan
Menambahkan CSS dengan cara ini adalah cara berpikir efektif tentang gaya html. Tentu saja Anda dapat membantah tidak ada hal seperti itu tetapi untuk metode yang mudah dijelaskan, ini adalah solusi yang mungkin.
Davington III
Ini masih CSS, dan preferensi sebenarnya yang diberikan adalah tidak memiliki file terpisah. Cara terbaik untuk menyelesaikan masalah dengan pembatasan itu adalah <style>. Gaya sebaris harus digunakan dengan hemat.
mirichan
Nah pada saat saya membuat posting itu karena saya harus menggunakan gaya inline. Tampaknya bermanfaat untuk mencatat bahwa kemungkinan bagi orang lain hanya jika mereka mungkin tidak memikirkannya, Ini bukan topik yang tepat untuk perang & perdamaian ... Mereka mungkin menemukan apa yang mereka butuhkan dan saran kami ada untuk mereka dan orang lain yang mungkin membutuhkan mereka, ketika saya memposting dari pekerjaan saya tidak memperhitungkan seseorang menunjukkan sesuatu yang sudah jelas tentang saran ketika itu adalah saran bukan "Anda harus melakukannya dengan cara ini" jadi ya ambillah pil dinginkan bro :)
Davington III
1
Anda salah mengira niat saya. Saya membuat observasi teknis yang relevan dengan pertanyaan yang diajukan. Saya tidak berniat memanggil Anda, dan saya minta maaf karena hal itu terjadi.
mirichan