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

HTML CSS Стиль окна

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

По сути, я бы хотел, чтобы вокруг текста образовалась небольшая рамка. Обратите внимание на последний «прямоугольник» на изображении: если строка слишком длинная, она обрывается и продолжается на следующей строке.

Включен код CSS и пример использования.

<style type="text/css">
  boxytest
  {
    padding: 10px;
    text-align: center;
    line-height: 400%%;
    background-color: #fff;
    border: 5px solid #666;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
  }
</style>

<body>
  <div align="center">
   <boxytest> Hey guys! What's up? </boxytest>
  </div>
</body>

Любая помощь приветствуется.

html css
30.03.2012

Ответы:


1

Что ж, я думаю, во-первых, с точки зрения разметки, вы хотите создать класс boxytest, а не создавать новый элемент. И не используйте align = center. Больно поддерживать.

Я бы сделал что-то вроде этого:

<body>
  <p class="boxy">Test sentence</p>
<body>

В CSS:

 .boxy {
  padding: 10px;
  text-align: center;
  line-height: 400%%;
  background-color: #fff;
  border: 5px solid #666;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  /* to prevent word wrapping */
  white-space: nowrap;
  overflow: hidden;
  }

Последний бит основан на этом сообщении.

30.03.2012
  • Я последовал твоему совету, и теперь это выглядит так. jsfiddle.net/zBExV/1 Однако есть способ изменить ширину на меньшую и любую лишние слова должны вытягиваться вертикально? 30.03.2012
  • Извините - я неправильно понял - я думал, вы хотите, чтобы текст вообще не переносился. Для этого и используется объявление пробела. Саймон Уэст прав - вам нужно добавить display: inline-block, и если вы хотите, чтобы он был центрирован, вам нужен родительский элемент с примененным text-align: center. Я обновил вашу скрипку: jsfiddle.net/zBExV/2 30.03.2012
  • Большое вам спасибо за вашу помощь! 'Это очень признательно! :) 30.03.2012

    • 2

    Как говорит Чипкуллен, изобретение собственного элемента, вероятно, не лучший способ добиться этого. Но чтобы ответить на ваш вопрос, ключевое отклонение стиля, которое вы пропустили, выглядит display:inline-block;

    jsfiddle здесь

    30.03.2012
  • Понятно! Спасибо за вашу помощь! 30.03.2012
    • Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]