WedX - журнал о программировании и компьютерных науках

как изменить свойство цвета тега ‹u›, используемого для текста

я использую следующий код для отображения строки в несколько строк, и каждая строка подчеркнута, но я хочу изменить цвет тега подчеркивания, и я хочу использовать свойство text-align:justify для отображения текста по ширине, но его не работает правильно.

<div>
        <u><b>Uitgevoerde werkzaamheden</b></u>
        <u><p class="test">{{{$werkbon_report->work_preformed}}}</p></u>
</div>

я хочу, чтобы под текстом было подчеркивание, и его цвет был синим, а его ширина составляла 100% независимо от ширины текста.

как изменить цвет тега по умолчанию, используемый для подчеркивания текста.

мой класс CSS

 p.test{
    width:100%; 
    word-wrap:break-word;
    text-align: justify;
    line-height:200%;
}
html css laravel-4
03.01.2014

  • используйте для этого span...u не поможет вам достичь своей цели!! 03.01.2014
  • возможный дубликат изменение цвета подчеркивания 03.01.2014
  • Речь идет об изменении цвета подчеркивания, и об этом несколько раз спрашивали и отвечали на SO. 03.01.2014

Ответы:


1

я не думаю, что вы можете изменить это таким образом... вместо этого используйте span

html, body {
    width:100%; /* make sure this is present in your css, else 100% wont work */
}
p.test {
    width:100%; /* this is dependent on parents width */
    word-wrap:break-word;
    text-align: justify;
    line-height:200%;

}
p.test > span {
    display:block;
    width:100%;
    padding-bottom:3px; /* how low underline should be */
    border-bottom:1px solid blue; /*underline color*/
    color:red; /*text color*/
    text-align:justify;
}

HTML

<p class="test"><span><b>Uitgevoerde werkzaamheden</b></span>

</p>

демонстрация (только строка ширины текста)

вторая демонстрация (линия ширины браузера)

03.01.2014
  • я хочу изменить только цвет подчеркивания, а не цвет текста. 03.01.2014
  • пожалуйста, проверьте 2-ю демонстрацию... ваш цвет текста не поврежден!! 03.01.2014
  • не могли бы вы проверить мою 2-ю строку в коде, которая является строкой и должна отображаться как многострочная строка, и вся строка должна быть подчеркнута, как вы сделали для первой строки 03.01.2014
  • если вы дадите html output для 2-й строки, я мог бы помочь .... в настоящее время, я не знаю выход !! :) 03.01.2014
  • вторая строка - это не что иное, как строковое значение, динамически поступающее из базы данных, но я хочу отобразить его в виде нескольких строк, для которых я использовал свойство wordwrap, как вы можете видеть в моем коде, но строки также должны отображаться так же, как первая строка, т.е. она должна быть подчеркнута, и цвет подчеркивания должен быть синим, а его ширина равна 100%. Это выглядит так же, как вы сделали для 1-й строки. 03.01.2014
  • давайте продолжим обсуждение в чате 03.01.2014
  • да, вывод должен отображаться так, но в моем случае строка исходит из базы данных, которая представляет собой большую строку, я использую свойство wordwrap, чтобы разбить ее на разные строки и отобразить, как вы показали, но с небольшим модификация, ширина подчеркивания последней строки также должна быть 100%. 03.01.2014
  • Это вообще не подчеркивание, а нижняя граница. Это и реальное изменение цвета подчеркивания можно сделать независимо от того, используется u или нет. 03.01.2014
  • @JukkaK.Korpela: мне не терпится узнать, как это можно сделать по-твоему!! :) 03.01.2014
  • Этот вопрос является дубликатом. Любые усилия по улучшению ответов должны быть сосредоточены на более ранних вопросах, после прочтения их ответов. 03.01.2014

    • 2

    Использование word-break не разобьёт ваш текст на две строки, для этого либо вам нужно использовать тег <br />, либо вам нужно назначить какое-то короткое width вашему тегу p, во-вторых, если вы ожидаете, что это должно оправдать, то это не так. в одной строке есть только одно слово, поэтому не ожидайте, что CSS разместит символы для вас в одной строке...

    Если вы хотите расставить своих персонажей, вам придется использовать свойство letter-spacing.

    Демо

    Здесь, в приведенной выше демонстрации, я назначил некоторый фиксированный width вашему элементу p, а затем я просто использовал пробел для первого слова, просто чтобы показать вам, что text-align: justify работает хорошо...

    И, наконец, если вы хотите иметь другой цвет подчеркивания, вы не можете настроить его, просто используя тег u, вам нужно использовать span вокруг слов со свойством border-bottom

    Демонстрация 2

    введите здесь описание изображения

    03.01.2014
  • @NoobEditor Ну, он выбрал твой, так что тоже проголосовал за тебя :) 03.01.2014

    • 3

    Если вы можете поместить диапазон в свой абзац, вы можете попробовать это следующим образом:

    HTML

    <p class="test"><span>Uitgevoerde werkzaamheden</span></p>

    CSS

    p.test{
width:100%; 
word-wrap:break-word;
text-align: justify;
line-height:200%;
font-weight: bold;
}

p.test > span {
border-bottom: 1px solid blue;
}

    Скрипка

    03.01.2014

    4

    Попробуй это :

    p.test, p.test u {
color:green;
text-align:justify
}
    03.01.2014

    5

    Можете ли вы попробовать это, добавьте div u

    p.test{
   width:100%; 
   word-wrap:break-word;
   text-align: justify;
   line-height:200%;
   text-decoration: none; 
   border-bottom: 1px solid green;
}

div u{
   text-decoration: none; 
   border-bottom: 1px solid green;
}

    Демо: https://jsfiddle.net/WQabG/2/

    03.01.2014

    6

    Это тебе поможет??

     <head>
<style>
p.test{
    line-height:200%;
}
hr { 
border-color: blue;
margin-top: -20px;
}
</style>
</head>
<body>
<p class="test"><b>Uitgevoerde werkzaamheden</b></p>
<hr>
</body>
    03.01.2014
    Новые материалы
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Для любых предложений по сайту: [email protected]