Làm cách nào để thay thế văn bản bằng CSS?

Làm cách nào để thay thế văn bản bằng CSS bằng phương pháp như sau:

.pvw-title img[src*="IKON.img"] { visibility:hidden; }

Thay vì ( img[src*="IKON.img"] ), tôi cần sử dụng một cái gì đó có thể thay thế văn bản thay thế.

Tôi phải sử dụng [ ]để làm cho nó hoạt động.

<div class="pvw-title">Facts</div>

Tôi cần thay thế " Sự kiện ".

Hoặc có lẽ bạn có thể bao bọc 'Sự kiện' <span>như sau:

<div class="pvw-title"><span>Facts</span></div>

Sau đó sử dụng:

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

Bắt buộc : Đây là một hack: CSS không phải là nơi thích hợp để thực hiện việc này, nhưng trong một số trường hợp - ví dụ: bạn có thư viện của bên thứ ba trong iframe chỉ có thể được tùy chỉnh bởi CSS - loại hack này là tùy chọn duy nhất .

Bạn có thể thay thế văn bản thông qua CSS. Hãy thay thế một nút màu xanh lục bằng 'xin chào' bằng một nút màu đỏ có nội dung 'tạm biệt' , sử dụng CSS.

Trước:

Sau:

Xem http://jsfiddle.net/ZBj2m/274/ để xem bản demo trực tiếp:

Đây là nút màu xanh lá cây của chúng tôi:

<button>Hello</button>

button {
  background-color: green;
  color: black;
  padding: 5px;
}

Bây giờ, hãy ẩn phần tử gốc, nhưng thêm phần tử khối khác sau đó:

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

Ghi chú:

• Chúng tôi rõ ràng cần phải đánh dấu đây là phần tử khối, các phần tử 'sau' là nội tuyến theo mặc định
• Chúng ta cần bù cho phần tử gốc bằng cách điều chỉnh vị trí của phần tử giả.
• Chúng ta phải ẩn phần tử gốc và hiển thị phần tử giả bằng cách sử dụng visibility. Lưu ý display: nonevề yếu tố ban đầu không hoạt động.

Nếu bạn sẵn sàng sử dụng các yếu tố giả và để chúng chèn nội dung, bạn có thể làm như sau. Nó không giả định kiến ​​thức về yếu tố ban đầu và không yêu cầu đánh dấu bổ sung.

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

Ví dụ về JSFiddle

Dựa trên câu trả lời của mikemaccana , điều này hiệu quả với tôi

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

§ Định vị tuyệt đối

một phần tử được định vị hoàn toàn được đưa ra khỏi dòng chảy và do đó không chiếm không gian khi đặt các phần tử khác.

Điều này là đơn giản, ngắn và hiệu quả. Không cần thêm HTML.

.pvw-title { color: transparent; }

.pvw-title:after {
        content: "New Text To Replace Old";
        color: black; /* set color to original text color */
        margin-left: -30px;
        /* margin-left equals length of text we're replacing */
    }

Tôi đã phải làm điều này để thay thế văn bản liên kết, ngoại trừ nhà, cho mẩu bánh mì WooC Commerce

Sass / Ít hơn

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
    &:after {
        content: "Store";
        color: grey;
        margin-left: -30px;
    }
}

CSS

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
}

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after {
    content: "Store";
    color: @child-color-grey;
    margin-left: -30px;
}

Bạn không thể, tốt, bạn có thể.

.pvw-title:after {
  content: "Test";
}

Điều này sẽ chèn nội dung sau nội dung hiện tại của phần tử. Nó không thực sự thay thế nó, nhưng bạn có thể chọn một div trống và sử dụng CSS để thêm tất cả nội dung.

Nhưng trong khi bạn ít nhiều có thể, bạn không nên. Nội dung thực tế nên được đưa vào tài liệu. Thuộc tính nội dung chủ yếu dành cho đánh dấu nhỏ, như dấu ngoặc kép quanh văn bản sẽ xuất hiện trích dẫn.

Hãy thử sử dụng :beforevà :after. Một chèn văn bản sau khi HTML được hiển thị và các chèn khác trước khi HTML được hiển thị. Nếu bạn muốn thay thế văn bản, hãy để trống nội dung nút.

Ví dụ này đặt văn bản nút theo kích thước của chiều rộng màn hình.

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  button:before {
    content: 'small screen';
  }
  @media screen and (min-width: 480px) {
    button:before {
      content: 'big screen';
    }
  }
</style>
<body>
  <button type="button">xxx</button>
  <button type="button"></button>
</body>

Nút văn bản:

1. Với :before

   màn hình lớn

   màn hình lớn

2. Với :after

   màn hình xxxbig

   màn hình lớn

Nếu bạn chỉ muốn hiển thị các văn bản hoặc hình ảnh khác nhau, hãy để thẻ trống và viết nội dung của bạn trong nhiều thuộc tính dữ liệu như thế <span data-text1="Hello" data-text2="Bye"></span>. Hiển thị chúng với một trong các lớp giả:before {content: attr(data-text1)}

Bây giờ bạn có một loạt các cách khác nhau để chuyển đổi giữa chúng. Tôi đã sử dụng chúng kết hợp với các truy vấn phương tiện cho phương pháp thiết kế đáp ứng để thay đổi tên điều hướng của tôi thành biểu tượng.

trình diễn và ví dụ jsfiddle

_{Nó có thể không trả lời hoàn hảo câu hỏi, nhưng nó thỏa mãn nhu cầu của tôi và có thể những người khác cũng vậy.}

Tôi đã thiết lập các may mắn hơn font-size: 0trong những yếu tố bên ngoài, và font-sizecác :afterselector để bất cứ điều gì tôi cần.

Điều này làm việc cho tôi với văn bản nội tuyến. Nó đã được thử nghiệm trên Firefox, Safari, Chrome và Opera.

<p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p>

span {
    visibility: hidden;
    word-spacing: -999px;
    letter-spacing: -999px;
}

span:after {
    content: "goodbye";
    visibility: visible;
    word-spacing: normal;
    letter-spacing: normal;
}

Tôi sử dụng thủ thuật này:

.pvw-title {
    text-indent: -999px;
}
.pvw-title:after {
    text-indent: 0px;
    float: left;
    content: 'My New Content';
}

Tôi thậm chí đã sử dụng điều này để xử lý quốc tế hóa các trang bằng cách chỉ thay đổi một lớp cơ sở ...

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}

Thay thế văn bản bằng các yếu tố giả và khả năng hiển thị CSS

HTML

<p class="replaced">Original Text</p>

CSS

.replaced {
    visibility: hidden;
    position: relative;
}

.replaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

Sử dụng phần tử giả, phương pháp này không đòi hỏi kiến ​​thức về phần tử gốc và không yêu cầu bất kỳ đánh dấu bổ sung nào.

#someElement{
    color: transparent; /* You may need to change this color */
    position: relative;
}
#someElement:after { /* Or use :before if that tickles your fancy */
    content: "New text";
    color: initial;
    position: absolute;
    top: 0;
    left: 0;
}

Điều này thực hiện một hộp kiểm dưới dạng nút hiển thị Có hoặc Không tùy thuộc vào trạng thái 'được kiểm tra' của nó. Vì vậy, nó thể hiện một cách thay thế văn bản bằng CSS mà không phải viết bất kỳ mã nào.

Nó vẫn sẽ hoạt động giống như một hộp kiểm cho đến khi trả về (hoặc không trả về) một giá trị POST, nhưng từ quan điểm hiển thị, nó trông giống như một nút chuyển đổi.

Màu sắc có thể không theo ý thích của bạn, chúng chỉ ở đó để minh họa một điểm.

HTML là:

<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>

... và CSS là:

/* --------------------------------- */
/* Make the checkbox non-displayable */
/* --------------------------------- */
input[type="checkbox"].yesno {
    display:none;
}
/* --------------------------------- */
/* Set the associated label <span>   */
/* the way you want it to look.      */
/* --------------------------------- */
input[type="checkbox"].yesno+label span {
    display:inline-block;
    width:80px;
    height:30px;
    text-align:center;
    vertical-align:middle;
    color:#800000;
    background-color:white;
    border-style:solid;
    border-width:1px;
    border-color:black;
    cursor:pointer;
}
/* --------------------------------- */
/* By default the content after the  */
/* the label <span> is "No"          */
/* --------------------------------- */
input[type="checkbox"].yesno+label span:after {
    content:"No";
}
/* --------------------------------- */
/* When the box is checked the       */
/* content after the label <span>    */
/* is "Yes" (which replaces any      */
/* existing content).                */
/* When the box becomes unchecked the*/
/* content reverts to the way it was.*/
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span:after {
    content:"Yes";
}
/* --------------------------------- */
/* When the box is checked the       */
/* label <span> looks like this      */
/* (which replaces any existing)     */
/* When the box becomes unchecked the*/
/* layout reverts to the way it was. */
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span {
    color:green;
    background-color:#C8C8C8;
}

Tôi chỉ thử nó trên Firefox, nhưng đó là CSS tiêu chuẩn nên nó phải hoạt động ở nơi khác.

Không giống như những gì tôi thấy trong mỗi câu trả lời khác, bạn không cần sử dụng các yếu tố giả để thay thế nội dung của thẻ bằng hình ảnh

<div class="pvw-title">Facts</div>

    div.pvw-title { /* No :after or :before required */
        content: url("your URL here");
    }

Điều này thực sự không thể nếu không có thủ thuật. Đây là một cách làm việc bằng cách thay thế văn bản bằng một hình ảnh của văn bản.

.pvw-title{
    text-indent: -9999px;
    background-image: url(text_image.png)
}

Loại điều này thường được thực hiện với JavaScript. Đây là cách nó có thể được thực hiện với jQuery:

$('.pvw-title').text('new text');

Tôi gặp vấn đề khi phải thay thế văn bản liên kết, nhưng tôi không thể sử dụng JavaScript cũng như không thể thay đổi trực tiếp văn bản của siêu liên kết khi nó được biên dịch từ XML. Ngoài ra, tôi không thể sử dụng các yếu tố giả, hoặc chúng dường như không hoạt động khi tôi đã thử chúng.

Về cơ bản, tôi đặt văn bản tôi muốn vào một khoảng và đặt thẻ neo bên dưới nó và bọc cả hai trong một div. Về cơ bản, tôi đã di chuyển thẻ neo lên qua CSS và sau đó làm cho phông chữ trong suốt. Bây giờ khi bạn di chuột qua nhịp, nó "hoạt động" như một liên kết. Một cách thực sự khó khăn để làm điều này, nhưng đây là cách bạn có thể có một liên kết với văn bản khác ...

Đây là một câu đố về cách tôi khắc phục vấn đề này

HTML của tôi

<div class="field">
    <span>This is your link text</span><br/>
    <a href="//www.google.com" target="_blank">This is your actual link</a>
</div>

CSS của tôi

 div.field a {
     color: transparent;
     position: absolute;
     top:1%;
 }
 div.field span {
     display: inline-block;
 }

CSS sẽ cần thay đổi dựa trên yêu cầu của bạn, nhưng đây là cách chung để thực hiện những gì bạn đang yêu cầu.

Tôi đã tìm thấy một giải pháp như thế này trong đó một từ, "Dark", sẽ được rút ngắn thành "D" trên chiều rộng màn hình nhỏ hơn. Về cơ bản, bạn chỉ cần tạo kích thước phông chữ của nội dung gốc 0 và có dạng rút gọn dưới dạng phần tử giả.

Trong ví dụ này, thay đổi xảy ra khi di chuột thay thế:

span {
  font-size: 12px;
}

span:after {
  display: none;
  font-size: 12px;
  content: 'D';
  color: red;
}

span:hover {
  font-size: 0px;
}

span:hover:after {
  display: inline;
}

<span>Dark</span>

Sau tám năm, tôi đã đối mặt với thử thách tương tự khi cố gắng sử dụng tiện ích mở rộng trình duyệt Thời trang để thay đổi thứ gì đó trên trang web (không phải của tôi). Và lần này tôi đã làm cho nó hoạt động bằng cách xem mã nguồn bằng cách sử dụng "phần tử kiểm tra" và tạo mã CSS dựa trên đó.

Đây là những gì nó trông giống như trước đây:

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

Đây là cùng một phần của HTML và CSS mà tôi đã sử dụng để sửa đổi kiểu:

td span[style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;"] {
  width: 100px!important;
}

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

Bạn có thể chạy mã ở trên và bạn sẽ thấy nó hoạt động (được thử nghiệm trong Chrome).

_{Đây đơn giản là những gì tôi muốn trở lại trong những ngày tôi hỏi câu hỏi này.}

_{Tôi đã sử dụng một số loại blog cộng đồng / Myspace công cụ tương tự và thứ duy nhất bạn có khi tạo kiểu cho hồ sơ của mình là trình soạn thảo CSS của họ và đó là lý do tại sao tôi muốn chọn nó dựa trên phong cách.}

Tôi tìm thấy câu trả lời ở đây:

• Bộ chọn CSS nâng cao - Chọn dựa trên kiểu dáng

• Bộ chọn CSS theo thuộc tính kiểu nội tuyến

Cách để thực hiện công việc này là thêm chiều cao dòng vào nội dung CSS. Điều này sẽ làm cho khối được nhìn thấy phía trên ẩn, do đó điều này sẽ không ẩn văn bản đã thay đổi.

Ví dụ với việc sử dụng trước :

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'Whatever it is you want to add';
  line-height: 1.5em
}

Vâng, như nhiều người nói đây là một hack. Tuy nhiên, tôi muốn thêm các bản cập nhật mới hơn, điều này tận dụng lợi thế flexboxvà rem, tức là

• Bạn không muốn định vị thủ công văn bản này để thay đổi, đó là lý do tại sao bạn muốn tận dụng lợi thế của flexbox
• Bạn không muốn sử dụng paddingvà / hoặc marginsử dụng văn bản một cách rõ ràng px, với các kích thước màn hình khác nhau trên các thiết bị và trình duyệt khác nhau có thể cho đầu ra khác nhau

Tóm lại, đây là giải pháp flexboxđảm bảo rằng nó tự động được định vị hoàn hảo và remđược thay thế chuẩn hơn (và tự động) cho pixel.

CodeSandbox với mã bên dưới và xuất ra dưới dạng ảnh chụp màn hình, vui lòng đọc notemã bên dưới!

h1 {
  background-color: green;
  color: black;
  text-align: center;
  visibility: hidden;
}
h1:after {
  background-color: silver;
  color: yellow;
  content: "This is my great text AFTER";
  display: flex;
  justify-content: center;
  margin-top: -2.3rem;
  visibility: visible;
}
h1:before {
  color: blue;
  content: "However, this is a longer text to show this example BEFORE";
  display: flex;
  justify-content: center;
  margin-bottom: -2.3rem;
  visibility: visible;
}

Lưu ý: đối với các thẻ khác nhau, bạn có thể cần các giá trị khác nhau rem, thẻ này đã được chứng minh h1và chỉ trên các màn hình lớn. Tuy nhiên với @mediabạn có thể dễ dàng mở rộng điều này cho các thiết bị di động.