Cách thêm dấu gạch chân có dấu chấm bên dưới văn bản HTML

96

Làm cách nào để bạn gạch dưới văn bản html để dòng bên dưới văn bản được chấm thay vì gạch dưới tiêu chuẩn? Tốt hơn là tôi muốn thực hiện việc này mà không cần sử dụng tệp CSS riêng biệt. Tôi là người mới làm quen với html.

html underline

— parap
nguồn

13

Tại sao bạn không thể sử dụng CSS? Có thể tạo trang dưới dạng một hình ảnh và thêm dòng với mspaint?

— epascarello

Tôi không nghĩ rằng nó có thể được thực hiện mà không CSS

— Cfreak

Bạn phải sử dụng css, nhưng nó có thể được thực hiện bằng hình ảnh nền, đáy biên giới là cách tiếp cận tốt nhất

— kingdomcreation

4

Các anh chàng. Tôi nghĩ anh ấy đã nói "không sử dụng tệp CSS riêng biệt", không phải "không có CSS". Thờ những người mới.

— Stefan Reich

138

Không thể không có CSS. Trên thực tế, <u>thẻ chỉ đơn giản là thêm text-decoration:underlinevào văn bản bằng CSS tích hợp của trình duyệt.

Đây là những gì bạn có thể làm:

<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
nguồn

Trong <head>phần tử của bạn , hãy thêm một <style>thẻ (Tôi đã chỉnh sửa câu trả lời của mình)

— Alfred Xing

2

bạn cũng có thể thử dottedthay vìdashed

— Brian Burns

Giải pháp tốt và nó có thể. Đừng làm cho tôi js mã cho nó;)

— Ahmet Can Güven

Dưới đây là câu trả lời với nhiều dòng hỗ trợ văn bản stackoverflow.com/a/4365458/1078641

— electroid

32

Sử dụng các mã CSS sau ...

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

— Shakeel Ahmed
nguồn

3

Đây phải là câu trả lời được chấp nhận. Theo mô hình hộp, sử dụng dấu chấm bordersẽ được đặt bên ngoài paddingvà do đó sẽ cách xa văn bản.

— Ryan Walker

2

Có một cú pháp ngắn gọn: text-decoration: underline #000 dotted;trong đó thuộc tính đầu tiên là dòng, thứ hai là màu sắc và thứ ba là kiểu dáng.

— Sos Sargsyan

Cảm ơn Sos đã cải thiện

— Shakeel Ahmed

15

Nếu không có CSS, về cơ bản bạn sẽ gặp khó khăn với việc sử dụng thẻ hình ảnh. Về cơ bản tạo một hình ảnh của văn bản và thêm gạch dưới. Về cơ bản, điều đó có nghĩa là trang của bạn vô dụng đối với trình đọc màn hình.

Với CSS, nó thật đơn giản.

HTML:

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

CSS:

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

Chạy ví dụ

Trang ví dụ

<!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
nguồn

9

Phần tử HTML5 có thể cho gạch chân có dấu chấm nên văn bản bên dưới sẽ có dòng chấm thay vì gạch dưới thông thường. Và thuộc tính title tạo mẹo công cụ cho người dùng khi họ di con trỏ qua phần tử:

LƯU Ý: Đường viền / gạch dưới có dấu chấm được hiển thị theo mặc định trong Firefox và Opera, nhưng IE8, Safari và Chrome cần một dòng CSS:

<abbr title="Hyper Text Markup Language">HTML</abbr>

— Fatima Waheed
nguồn

Đây là câu trả lời chính xác. Ngắn gọn và không có CSS. Cảm ơn.

— Saeed Ahadian

4

Nếu nội dung có nhiều hơn 1 dòng, việc thêm đường viền dưới cùng sẽ không hữu ích. Trong trường hợp đó, bạn sẽ phải sử dụng,

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

Nếu bạn muốn có thêm khoảng trống giữa văn bản và dòng, chỉ cần sử dụng,

text-underline-position: under;

— Darshana Gunawardana
nguồn

3

Đã định dạng lại câu trả lời bởi @epascarello :

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

<!DOCTYPE html>
<u class="dotted">I like cheese</u>

Mở rộng đoạn mã

— anatoly techtonik
nguồn

0

Bạn có thể sử dụng đường viền dưới cùng với dottedtùy chọn.

border-bottom: 1px dotted #807f80;

— Neel
nguồn

0

Bạn có thể thử phương pháp này:

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

Xin lưu ý rằng không có text-underline-position: under;bạn vẫn sẽ có một gạch dưới chấm nhưng thuộc tính này sẽ cung cấp cho nó nhiều không gian hơn.

Điều này giả sử bạn muốn nhúng mọi thứ bên trong tệp HTML bằng cách sử dụng kiểu nội dòng và không sử dụng tệp hoặc thẻ CSS riêng biệt.

— Mona Jalal
nguồn

-2

Không thể không có CSS. Ví dụ như một mục danh sách:

<li style="border-bottom: 1px dashed"><!--content --></li>

— Davington III
nguồn

6

Không thể không có CSS. Các stylethuộc tính chỉ đơn giản là một cách để áp dụng thuộc tính CSS trực tiếp đến một phần tử. Xem tài liệu MDN về thuộc tính style.

— mirichan

Thêm CSS theo cách này là một cách suy nghĩ hiệu quả về tạo kiểu html. Tất nhiên bạn có thể tranh luận rằng không có điều đó nhưng đối với một phương pháp dễ mô tả thì đây là một giải pháp khả thi.

— Davington III

Tuy nhiên, nó vẫn là CSS và ưu tiên thực sự được đưa ra là không có một tệp riêng biệt. Cách tốt nhất để giải quyết vấn đề với hạn chế đó là <style>. Các kiểu nội tuyến nên được sử dụng khá tiết kiệm.

— mirichan

Tại thời điểm tôi tạo bài đăng đó là do tôi phải sử dụng các kiểu nội tuyến. Có vẻ như đáng chú ý rằng khả năng đó đối với những người khác, chỉ trong trường hợp họ có thể không nghĩ đến, Nó không thực sự là một chủ đề thích hợp cho chiến tranh và hòa bình ... Họ có lẽ đã tìm thấy những gì họ cần và đề xuất của chúng tôi dành cho những người đó và bất kỳ người nào khác có thể cần chúng, khi tôi đăng bài từ nơi làm việc, tôi không tính đến việc ai đó chỉ ra điều gì đó đã rõ ràng về đề xuất khi đó là một đề xuất không phải là "bạn phải làm theo cách này" vì vậy hãy uống một viên thuốc lạnh

— nhé anh em

1

Bạn nhầm ý định của tôi. Tôi đang quan sát kỹ thuật liên quan đến câu hỏi được đặt ra. Tôi không có ý định gọi bạn ra ngoài và tôi xin lỗi vì nó đã xảy ra theo cách đó.

— mirichan