Làm cách nào để loại bỏ khoảng cách chữ cái cho chữ cái cuối cùng của một phần tử trong CSS?

Question

Đây là hình ảnh được đề cập đến trong trang HTML của tôi. Trình đơn văn bản nằm bên trong div được căn phải và có khoảng cách chữ cái 1,2em. Có một bộ chọn giả cho điều này không? Tôi không muốn phải nghỉ mát để định vị tương đối.

Tôi rất thích menu văn bản để kết thúc khi khối kết thúc.

Tôi đã đánh dấu một câu trả lời tốt nhất, nhưng tôi đã yêu cầu đánh dấu phân biệt bởi CodeBlock. Đây rồi.

<div class="sidebar"> 
     <span class="menuheader">MENU</span> 
     <ul> 
     <li><a href="#content">Content</a></li> 
     <li><a href="#attachments">Attachments</a></li> 
     <li><a href="#subpages">Sub-pages</a></li> 
     <li><a href="#newsubpage">New sub-page</a></li> 
     </a></ul> 
</div> 

.sidebar{ 
color: rgb(150,93,101); 
display: inline; 
line-height: 1.3em; 
position: absolute; 
top: 138px; 
width: 218px; 
} 

.menuheader{ 
letter-spacing: 1.1em; 
margin: -1.2em; 
text-align: right; 
} 

Answer 1

Bạn có thể đặt phần tử của bạn có lề phải -1,2em, điều này sẽ chống lại khoảng cách giữa các chữ cái.

ví dụ:

.menu-header-selector { 
    display:block; 
    letter-spacing:1.2em; 
    margin-right:-1.2em; 
    text-align:right; 
} 

Để trả lời câu hỏi của bạn về công cụ chọn giả, không có bộ chọn giả ký tự theo như tôi biết. (EDIT: Scratch rằng, có :First-Letter chọn, mà Jonas G. Drange chỉ ra).

EDIT: Bạn có thể tìm thấy một mẫu cơ bản ở đây: http://jsfiddle.net/teUxQ/

Answer 2

Bạn không thể nhắm mục tiêu các ký tự cuối cùng, chỉ có những người đầu tiên (CSS3,: first-letter). Bạn có thể thêm một khoảng xung quanh chữ cái cuối cùng, nhưng điều đó có nghĩa là thêm đánh dấu vô nghĩa mà "tồi tệ" hơn việc thêm định vị vào phần tử.

CSS hoàn hảo cho hoạt động như thế này :)

Answer 3

Tôi sẽ gọi đây là lỗi trình duyệt. spec cho biết đó là khoảng cách giữa các ký tự, trong khi trình duyệt của bạn (và mỏ) dường như đang thay đổi khoảng cách sau ký tự. Bạn nên gửi báo cáo lỗi.